0

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

<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 来完成这个？

4

2 回答 2

1

我不会为你编写代码......而且杀死狗的方法有很多......

阅读此链接或 jQuery 方法...

开始一些代码，然后在代码有问题时回来......

于 2010-06-10T07:46:32.187 回答
1

使用您的代码作为参考，您可以只使用一个 setInterval 来显示/隐藏您想要的 div。但是，有几十种不同的方法可以做到这一点。

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()

于 2010-06-10T08:01:20.877 回答