破碎的HTML幻灯片

Broken HTML slideshow

本文关键字：幻灯片 HTML 破碎      更新时间：2023-09-26

我一直在使用一个简单的幻灯片，但是要么我无法获得过渡效果，要么在效果工作时第一次运行时图像丢失。

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; }

我对编码很陌生，所以我尽量让它保持简单。

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

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

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

相关文章：