1

私は css-tricks.coma のスライドショーを使用しています (そして少し変更しています)。

次のjqueryコードを使用すると、うまく機能します（循環するのではなく、画像を積み重ねるだけのIEを除く）：

setTimeout(function(){ 
$(document).ready(function() {
$("#slideshow1 > div:gt(0)").hide();
                setInterval(function() { 
                $('#slideshow1 > div:first')
                    .fadeOut(500)
                    .next()
                    .fadeIn(500)
                    .end()
                    .appendTo('#slideshow1');
                },  750);
        });}, 750);

誰かが (IE の修正として) .appendTo 行 (上記のスクリプトの最後から 3 番目) を .appendTo('#slideshow1') から .appendTo('#slideshow1 > div:first') に変更することを提案しました

これにより、IE はスライドショーを循環できますが、1 回だけです。さらに、スライドショーは、元のバージョンでは正しく循環していたのに対し、Safari、Chrome、および Firefox では 1 回だけ循環するようになりました。

いくつかの jsfiddles を次に示します。

動作するバージョン: http://jsfiddle.net/Zcx62/10/ 非動作するバージョン: http://jsfiddle.net/Zcx62/20/

#slideshow1 {
    margin:0 auto; 
    position: relative; 
    width: 60px; 
    height: 60px;   
    border: 5px solid #CBCED1}

#slideshow1 > div {
    position: absolute}

<div id="slideshow1">
    <div><img src="Image URL in fiddle"></div>
    <div><img src="Image URL in fiddle"></div>
</div>

ありがとうございました。

4

1 に答える 1

0

それ以外の

.appendTo('#slideshow1 > div:first');

これを使って：

.insertAfter('#slideshow1 > div:last');

http://jsfiddle.net/mblase75/Zcx62/23/

元のコードを使用して次の CSS を追加するだけで、IE の問題を解決できる場合もあります。

#slideshow1 > div:first-child {
  z-index: 2;
}

http://jsfiddle.net/mblase75/Zcx62/24/

于 2013-01-16T14:25:33.250 に答える