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 に答える