我尝试使用与此处讨论的方法不同的方法来解决问题
所以我有这样的相关html:
<div id="main-container"></div>
<div id="list-container">
<ul id="list">
<li class="thumb"><img src="img/thumb-image1.jpg"></li>
<li class="thumb"><img src="img/thumb-image2.jpg"></li>
<li class="thumb"><img src="img/thumb-image3.jpg"></li>
<li class="thumb"><img src="img/thumb-image4.jpg"></li>
<li class="thumb"><img src="img/thumb-image5.jpg"></li>
<li class="thumb"><img src="img/thumb-image6.jpg"></li>
</ul>
</div>
然后某处有一个 img 文件夹,其中包含 6 个名为:
image1.jpg image2.jpg image3.jpg image4.jpg image5.jpg image6.jpg
并且使用 jquery,我试图通过以 3 秒的时间间隔操作 css 和列表索引来基本上交换其容器 div 内的图像。所以我的第一个猜测是:
$('#list li').each(function(index){
$('#main-container').css({
'background':'url("img/image'+(index+1)+'.jpg")'
});
不幸的是,它没有按我的意愿工作。它只是吐出最后一个索引,即 5,所以显示的图像最终显示为 image6 而不是第一个 image1,然后 3 秒后,image2 和 2secs,image3 将显示,依此类推。
那么如何合并setInterval()
索引更改以创建图像旋转的效果。
笔记:
<div id="main-container"></div>
只是一个空容器,在动态调用时将用作存储在 img 文件夹中的图像的占位符。
实际上,在 js 文件中,单击缩略图时,下面的代码会起作用。
$('#list li').each(function(index){
$(this).on('click', function(){
$('#main-container').css({
'background':'url("img/image'+(index+1)+'.jpg")'
});
});
});
我的目标是,即使未单击缩略图,等效的大图像也应在#main-container
创建连续幻灯片的内部旋转。