javascript - 损坏的 HTML 幻灯片

Question

我一直在使用简单的幻灯片放映，但我无法获得过渡效果，或者当效果起作用时图像在第一次运行时丢失。

HTML:

<script>
  $(function(){
    $('.slideshow img:gt(0)').hide();
    setInterval(function(){$('.slideshow img:first-child').fadeOut().next().fadeIn().end().appendTo('.slideshow');}, 3000);
  }); 
</script> 

<div class="slideshow">
  <a href="./page_1"><img src="img_1" width="700px" height="300px"></a>
  <a href="./page_2"><img src="img_2" width="700px" height="300px"></a>
  <a href="./page_3"><img src="img_3" width="700px" height="300px"></a>
  <a href="./page_4"><img src="img_4" width="700px" height="300px"></a>
</div>

CSS:

.slideshow { position:relative; width:500px; height:332px; }
.slideshow img { position:absolute; left:0; top:0; }

我对编码还很陌生，所以我尽量让它尽可能简单。

Answer 1

您应该选择 $('.slideshow a') 作为幻灯片而不是 $('.slideshow img')。这就是调用 next() 函数后代码运行失败的原因。

JSBin:http://jsbin.com/rofed/1/edit