1

所以我在这里有一个简单的幻灯片的代码:

$("#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/

但是,请注意,当图片发生变化时,您可以看到之前的图像褪色并向下移动,然后完全消失?

这对我来说是个问题,因为幻灯片需要放在一段文字的上方,而且随着图片的变化,图片在文字上闪烁,很烦人。有什么办法可以解决这个问题。

4

2 回答 2

1
<div style= "display:block;max-height: 210px;" id="slideshow">

这个最大高度是否真的有效,如果是,试试这个:

 <div style= "display:block;max-height: 210px; overflow:hidden;" id="slideshow">
于 2013-02-19T22:29:43.183 回答
1
#slideshow {
    position: relative;
}
#slideshow > div {
    position: absolute;
    top: 0;
    left: 0;
}

这会将图像放在彼此的顶部。

于 2013-02-19T22:32:35.190 回答