我正在尝试在我的网站上实现幻灯片放映并且遇到了一些困难。我选择创建一个 div 来保存我的照片并使用 background-image 来设置照片。所有照片都命名为 1.jpg、2.jpg ... 12.jpg。
这是分区...
<div class="featureImg"></div>
...和CSS:
#feature .featureImg {
[...some styling...]
background-image:url(../img/slideshow/1.jpg);
background-position:center;
background-repeat:no-repeat;
background-size:cover;
}
我希望在页面加载时有一个图像,然后让它在照片中淡出。这是我现在拥有的jQuery,但以下不起作用:
- 它们不会在彼此之间褪色
这是jQuery:
(function() {
var curImgId = 1;
var numberOfImages = 12; // Change this to the number of background images
window.setInterval(function() {
$('#feature .featureImg').css('background-image','url(/img/slideshow/' + curImgId + '.jpg)').fadeTo('slow', 1);
curImgId = (curImgId + 1) % numberOfImages;
}, 5 * 1000);
})();
问题:我该如何解决这个问题,以便页面加载时有一张照片(如 1.jpg),然后从一张照片淡化到下一张?