скользящие изображения в фоновом режиме

-1

У меня есть фоновое изображение слайдер. Я хочу, чтобы слайд-изображения были очень плавным.скользящие изображения в фоновом режиме

body { 
    /* Location of the image */ 
    background-image: url(images/BACKGROUND1.jpg); 


    /* Image is centered vertically and horizontally at all times */ 
    background-position: center center; 

    /* Image doesn't repeat */ 
    background-repeat: no-repeat; 

    /* Makes the image fixed in the viewport so that it doesn't move when 
    the content height is greater than the image height */ 
    background-attachment: fixed; 

    /* This is what makes the background image rescale based on its container's size */ 
    background-size: cover; 

    /* Pick a solid background color that will be displayed while the background image is loading */ 
    background-color:#464646; 

    /* SHORTHAND CSS NOTATION 
    * background: url(background-photo.jpg) center center cover no-repeat fixed; 
    */ 
background-position:0px 33px; 


    } 

/* For mobile devices */ 
@media only screen and (max-width: 767px) { 
    body { 
    /* The file size of this background image is 93% smaller 
    * to improve page load speed on mobile internet connections */ 
    background-image: url(images/BACKGROUND1.jpg); 
    } 
    } 
#b1 { background-image: url(images/BACKGROUND1.jpg); } 
#b2 { background-image: url(images/BACKGROUND2 .jpg); } 
#b3 { background-image: url(images/BACKGROUND3.jpg); } 
#b4 { background-image: url(images/BACKGROUND4.jpg); } 
#b5 { background-image: url(images/BACKGROUND1.jpg); } 
#b6 { background-image: url(images/BACKGROUND2.jpg); } 
#b7 { background-image: url(images/BACKGROUND3.jpg); } 
#b8 { background-image: url(images/BACKGROUND4.jpg); } 
#b9 { background-image: url(images/BACKGROUND3.jpg); } 
#b10 { background-image: url(images/BACKGROUND1.jpg); } 


    <html> 
     <a href="#">next/</a> 
     <a href="#">previuous/</a> 

    </body> 

</html>

Я хочу сменить фоновое изображение на клик. Я не эксперт в JavaScript. Может кто-нибудь мне помочь?

источник

2015-07-09 Rohit

Попробуйте

bootstrap corousel js

Это легко Javascript структура, с которой вы можете выполнить ваше требование.

В следующий раз, когда вы зададите любой вопрос, проверьте правильность написания слов, которые вы вводите, и объясните им четким способом.

источник

2015-07-09 13:36:01

Основываясь на том, что у вас есть, вы должны использовать Javascript, чтобы он заменил идентификатор тела указанным кликом следующим в вашем массиве (с b1 по b10). Это будет заботиться о перемещении между фоновыми изображениями:

var body_ids = [ 
"b1", 
"b2", 
"b3", 
"b4", 
"b5", 
"b6", 
"b7", 
"b8", 
"b9", 
"b10" 
]; 
var current_body_id_index = 0; 

var next_click = document.getElementById("click_next"); 
next_click.addEventListener("click", setNextBodyBackground); 

var click_previous = document.getElementById("click_previous"); 
click_previous.addEventListener("click", setPreviousBodyBackground); 


function setNextBodyBackground() { 
    current_body_id_index++; 
    if (current_body_id_index > 9) { 
    current_body_id_index = 0; 
    } 
    document.body.id = body_ids[current_body_id_index]; 
} 

function setPreviousBodyBackground() { 
    current_body_id_index--; 
    if (current_body_id_index < 0) { 
    current_body_id_index = 9; 
    } 
    document.body.id = body_ids[current_body_id_index]; 
}

Затем, для перехода между сторонами вы можете добавить что-то вроде этого, чтобы «тело» части вашего CSS:

-webkit-transition: background 0.6s linear; 
    -moz-transition: background 0.6s linear; 
    -o-transition: background 0.6s linear; 
     transition: background 0.6s linear;

Это создает эффект перехода каждый раз при изменении фона. Вы можете изменить это, чтобы создать разные эффекты.

Я положил все это в пример here.

источник

2015-07-09 13:54:23 TreHoffman

скользящие изображения в фоновом режиме

ответ

Смежные вопросы