我不想使用滑块插件,而是使用CSS / jquery来交替DIV的背景图像(fadein / fadeout或slide effect)。 目前我的代码如下:
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与第二张图片交替进行? 非常感谢您的帮助
答案 0 :(得分:6)
使用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
答案 1 :(得分:0)
尝试使用偶数和奇数选择器
.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;
}
答案 2 :(得分:0)
有一个核心滑块类
.slider{
opacity:1
-webkit-transition:opacity 500ms;
-moz-transition:opacity 500ms;
-ms-transition:opacity 500ms;
transition:opacity 500ms;
}
.hideSlide{
opacity:0
}
这会导致不透明度的淡化。然后,您可以使用隐藏幻灯片类更改不透明度,并在透明时更改背景图像。然后删除隐藏幻灯片类,它将淡入。
或者,你可以将一个div的div放在一起,逐渐消失,增加长度为500ms 1000ms,1500ms等,以便将它们暴露给观众。