破碎的HTML幻灯片
破碎的HTML幻灯片
提问于 2014-06-10 11:06:47
我一直在使用一个简单的幻灯片，但是我要么无法获得转换效果，要么在第一次运行时图像就会丢失。
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; }我对编码很陌生，所以我尽量保持它的简单。
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-06-10 13:38:36
您应该选择$('.slideshow a')作为幻灯片，而不是$('.slideshow img')。这就是为什么在调用next()函数后代码运行失败的原因。
JSBin：http://jsbin.com/rofed/1/edit
Stack Overflow用户
发布于 2014-06-10 13:54:55
//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 )
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24139447
复制相关文章
相似问题
腾讯云开发者
