0

http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/の指示に従って自動スライドショーを作成しました

js は次のようになります。

setInterval(function () {
    $('#singleSlideshow #slideItem:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#singleSlideshow');
    }, 3000);

これは、fadeIn/fadeOut する要素が 1 つだけのコンテンツ領域では問題なく機能します。たとえば、次のようになります。

<div id="slideShow">
    <img src="www.pictures.com/somepic.png"/>        
    <img src="www.pictures.com/anotherpic.png"/>
    <img src="www.pictures.com/theonepic.png"/>
</div>

しかし、構造化された要素を切り替える別のスライドショーがページに必要です。

 <div id="newsItem">
     <img class="newsImg" src="./somepic"/>
     <div id="newsTitle">Testnews 1</div>
     <div id="newsDate">01.01.2014</div>
     <div id="newsText">this is the first news text...</div>
 </div>

ここで見ることができます：http://jsfiddle.net/ehLdW/4/

---編集--- スクリプトのエラーを突き止めるために少し遊んでみました...逆の順序で動作するようにスクリプトを変更しました

setInterval(function () {
    $('#singleSlideshow #slideItem:last')
        .fadeOut(1000)
        .prev()
        .fadeIn(1000)
        .end()
        .prependTo('#singleSlideshow');
    }, 3000);

問題は同じです。クロス フェード効果はありませんが、フェード アニメーションは 1 つしかありません。興味深いのは、元のバージョンでは新しい要素のfadeInトランジションのみが表示されたのに対し、逆順のバージョンでは現在の要素のfadeOutトランジションのみが表示されたことです。

そのため、要素の効果が常に表示されます。インデックスが高いほど、それを修正する方法についての手がかりがありません...

4

1 に答える 1

1

あなたが何を望んでいるかを理解していると仮定すると、同じページに 2 つのスライドショーを配置し、タイミング/遷移時間が異なり、それぞれが独自の混合コンテンツ (画像および/または他の div) を表示する必要があります。

JSFIDDLE デモはこちら

HTML:

<div id="slideshow1">
   <div>
       <div style="color:red;">Content in first child of slideshow1</div>
       <div style="color:blue;">More content in first child of slideshow1</div>
   </div>
   <div>
     Content in second child of slideshow1
   </div>
   <div>
     Content in third child of slideshow1
   </div>
</div>

<div id="slideshow2">
   <div>
       <div style="color:red;">Content in first child of SLIDSHOW2</div>
       <div style="color:blue;">More content in first child of SLIDESHOW2</div>
   </div>
   <div>
     Content in second child SLIDESHOW2
   </div>
   <div>
     Content in third child SLIDESHOW2
   </div>
</div>

JQUERY:

$("#slideshow1 > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow1 > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow1');
},  3000);

$("#slideshow2 > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow2 > div:first')
    .fadeOut(2000)
    .next()
    .fadeIn(2000)
    .end()
    .appendTo('#slideshow2');
},  4500);

CSS:

#slideshow1 { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow1 > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

#slideshow2 { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow2 > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}
于 2014-08-22T15:34:47.737 に答える