Question

我需要创建一个非常简单的图像切换器来自动更改图像。我有以下代码：

<div class="imgCarousel">
   <div class="imgC1 left"><img src="/media/1614/1_1.jpg" alt="img1" /></div>
   <div class="imgC2 left"><img src="/media/1615/2_1.jpg" alt="img2" /></div>
   <div class="imgC3 left"><img src="/media/1616/3_1.gif" alt="img3" /></div>
   <div class="imgC4 left"><img src="/media/1617/4_1.jpg" alt="img4" /></div>
   <div class="imgC5 left"><img src="/media/1618/5_1.jpg" alt="img5a" /></div>
   <div class="imgC6 left"><img src="/media/1620/6_1.jpg" alt="img6a" /></div>
   <div class="imgC7 left"><img src="/media/1622/7.jpg" alt="img7" /></div>
</div>

上述两张图像应在一定时间后（每3-4秒）自动切换。这意味着在4秒后，我想用另一张图片更改名为 /media/1618/5_1.jpg 的图像。又过了4秒钟，我又回来了。我的其他一张照片也是如此。我怎么能用一些jQuery来实现呢？

Answer 1

我不会为你编码...而且有很多方法可以杀死一只狗......

给这个链接或jQuery方法一个读...

启动一些代码，然后在代码出现问题时回来......

Answer 2

使用您的代码作为参考，您可以使用显示/隐藏所需div的setInterval。但是，有许多不同的方法可以做到这一点。

setInterval将是：

var loop = setInterval("nextImage()",1000);

然后nextImage（）会显示/隐藏图像，我将以jQuery为例：

var index = 0;
var images_size = $(".imgCarousel div").size();

function nextImage(){
// we hide all the divs and show the next one only
$(".imgCarousel div").hide();
$(".imgCarousel div").eq(index).show();
// we continue the iteration
index = index+1;
if(index >= images_size){ index = 0; }
}

这是一个快速而肮脏的即兴创作作为一个例子，但同样，有很多方法可以做到这一点。您可能需要检查load()，src()等预加载功能，以及fadeIn()，fadeOut()等其他功能，以获得平滑过渡/效果。

使用jQuery创建一个简单的自动图像切换器

2 个答案: