DIV - Альтернативные фоновые изображения

Question

Вместо реализации плагина слайдера я хотел бы использовать CSS/jquery для чередования фоновых изображений DIV (эффект fadein/fadeout или slide). В настоящее время мой код, как показано ниже:

HTML

<div class="block backpic"> 
</div> 

CSS

.block { 

    display: block; 
     margin-right: auto; 
    margin-left: auto; 
    clear: both; 
    box-sizing: border-box; 
    padding-left: 20px; 
    padding-right: 20px; 
    width: 100%; 
    overflow: hidden; 
} 


.backpic { 
    height: 638px; 
    background-image: url(../images/picture1.jpg); 
    background-size: cover; 
} 

Что я должен сделать, чтобы чередовать picture1 со второй картинкой? Большое спасибо за вашу помощь

Answer 1

Использование JQuery исчезать элемент из, чем изменить его background-image свойство, а затем исчезают в снова:

$('.block').fadeOut(300, function(){ 

    $(this).css('background-image', 'url(path/to/other/image.jpg)') 

    $(this).fadeIn(300); 

}); 

Если вам нужна подобная слайд-шоу цикличность анимации, используйте метод JavaScript setInterval, чтобы повторить код после определенного количества миллисекунд:

var images = [ 

    'path/to/image1.jpg', 
    'path/to/image2.jpg', 
    'path/to/image3.jpg' 

]; 

var index = 0; 

setInterval(change_up, 1000); 

function change_up(){ 

    index = (index + 1 < images.length) ? index + 1 : 0; 

    $('.block').fadeOut(300, function(){ 

    $(this).css('background-image', 'url('+ images[index] + ')') 

    $(this).fadeIn(300); 

    }); 
} 

Вот example

Answer 2

попробуйте использовать четных и нечетных селекторы

.block:nth-child(odd) { 
background-image: 
height: 638px; 
    background-image: url(../images/picture1.jpg); 
    background-size: cover; 
} 

.block:nth-child(even) { 
background-image: 
height: 638px; 
    background-image: url(../images/pictureNew.jpg); 
    background-size: cover; 
} 

Answer 3

имеют ядро ​​слайдер класса

.slider{ 
    opacity:1 
    -webkit-transition:opacity 500ms; 
    -moz-transition:opacity 500ms; 
    -ms-transition:opacity 500ms; 
    transition:opacity 500ms; 
} 

.hideSlide{ 
    opacity:0 
} 

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

В качестве альтернативы вы могли бы получить пучок разделов, расположенных поверх друг друга, затухающих с увеличением длины 500 мс 1000 мс, 1500 мс и т. Д., Чтобы выставить их зрителю.