我不想使用 slider 插件,而是想使用 CSS/jquery 来交替 DIV 的背景图像(淡入/淡出或滑动效果)。 目前我的代码如下:
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;
}
我应该怎么做才能用第二张图片替换图片 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
关于javascript - DIV - 备用背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19083359/