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

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

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

Answer 2

//defines array of img elements
var current = $('img').length - 1;
//hide all then show the initial element
$('img').hide();
$('img').eq(current).show();
//set the interval
setInterval(function(){ $('img').eq(current).fadeOut("slow"); $('img').eq(current-1).fadeIn("slow"); if (current > 0) { current += -1; } else { current = $('img').length - 1; } }, 2000);

尝试使用js函数的这种变体（同样，确保你也包含jquery）

破碎的HTML幻灯片

2 个答案: