所以我在这里有一个简单的幻灯片的代码:
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(100)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
这是我的 HTML div:
<div style= "display:block;max-height: 210px;" id="slideshow">
<div>
<img src="https://lh5.googleusercontent.com/-hmenNgmckUY/UMYwzUQNdrI/AAAAAAAAB0Y/Z__BD-lxgYo/s912/gears.JPG">
</div>
<div>
<img src="https://lh6.googleusercontent.com/-Xn464dhgk6g/UNTgxgKrbvI/AAAAAAAAAwA/2omVTkLCjSE/s928/didy%2520site%25201.JPG">
</div>
</div>
这是一个工作小提琴:http: //jsfiddle.net/shrimpboyho/9n9GK/
但是,请注意,当图片发生变化时,您可以看到之前的图像褪色并向下移动,然后完全消失?
这对我来说是个问题,因为幻灯片需要放在一段文字的上方,而且随着图片的变化,图片在文字上闪烁,很烦人。有什么办法可以解决这个问题。