4

次のような4つの画像を表示するコードがあります。

function fadeDivs()
{
    var currentPanel = $("ul li:visible");
    var currentPanelIndex = currentPanel.index();

    currentPanel.fadeOut(1000);

    // If the next panel to fade in is beyond the last, start from the beginning again.
    if(currentPanelIndex == ($("ul li").length - 1))
    {
        $("ul li:first-child").fadeIn(1000);
    }
    else    // If it's not the last li, keep going through the list
    {
        currentPanel.next().fadeIn(1000);
    }

    // Keep the ball rolling
    setTimeout(fadeDivs, 5000);
}

$(document).ready(function() {
    // Just to make it look nice - this can be deleted (it's just filler content)
    $("ul li:eq(0)").html("<img src='http://barbados.org/landscap/bcparadise1.jpg'>");
    $("ul li:eq(1)").html("<img src='http://www.get-free-wallpapers.com/wallpaper/previews/3652-1202425455/nature/oceans/3652-victoria-beach-laguna-beach-california.jpg'>");
    $("ul li:eq(2)").html("<img src='http://www.traveltovietnam.cc/Upload/Tour/2352008111155_SplendorOfMuiNeBeachMuiNe2.jpg'>");
    $("ul li:eq(3)").html("<img src='http://www.croatia-danexumag.com/cms_upload/upload/Apartments_VERUDELA_BEACH_00.jpg'>");

    // Start the ball rolling
    setTimeout(fadeDivs, 3000);
});

今、それらをマトリックススタイルで表示したい

section.card-container{
    float: left;
     margin:0;
    width:24.94%;
}

.card-container {
    position: relative;
    width: 200px;
    height: 200px;

    -webkit-perspective: 1000;
       -moz-perspective: 1000;
         -o-perspective: 1000;
        -ms-perspective: 1000;
            perspective: 1000;
}

.card-container .card {
    width: 100%;
    height: 100%;
    position: absolute;

    -webkit-transition: -webkit-transform .7s;
     -moz-transition: -moz-transform .7s;
       -o-transition: -o-transform .7s;
      -ms-transition: -o-transform .7s;
          transition: transform .7s;

    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.card-container .card div { 
    height: 100%;
    width: 100%;
    position: absolute;
    background: #FBFBFB;
    border: 1px solid #BFBFBF;

    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
         -o-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
            backface-visibility: hidden;

    -webkit-box-shadow: 0 7px 9px -8px rgba(0,0,0,.5);
       -moz-box-shadow: 0 7px 9px -8px rgba(0,0,0,.5);
         -o-box-shadow: 0 7px 9px -8px rgba(0,0,0,.5);
        -ms-box-shadow: 0 7px 9px -8px rgba(0,0,0,.5);
            box-shadow: 0 7px 9px -8px rgba(0,0,0,.5);
}

htmlで：

<section class="card-container">
        <div id="so1" class="card over"  data-direction="right" >       
          <div class="front" >

              <ul>
     <li class='thecontent'> CONTENT 1</li>
     <li class='thecontent'> CONTENT 2</li>
     <li class='thecontent'> CONTENT 3</li>
     <li class='thecontent'> CONTENT 4</li>
              </ul>
          </div>         
          <div class="back" style="background-color:#99ca3c;">
              <img src="images/fancy_cereas1.jpg" width ="100%;" height ="100%;" alt=""/>               
          </div>         
        </div>
    </section>

これをマトリックスにある 8 枚のカード セルすべてに適用したいのですが、うまくいきません。カウンターが 5 に達すると停止し、1 以外の他のセルに画像が表示されません。解決方法問題？

私のフィドルを見てください

4

1 に答える 1

1

一部の画像が見つからなかったので、再利用しました。

document.ready 関数を次のように変更しました。

$(document).ready(function() {
// Just to make it look nice
for(var i = 0; i < 32;){
    $("ul li:eq("+(i++)+")").html("<img src='http://www.traveltovietnam.cc/Upload/Tour/2352008111155_SplendorOfMuiNeBeachMuiNe2.jpg'>");
    $("ul li:eq("+(i++)+")").html("<img src='http://www.get-free-wallpapers.com/wallpaper/previews/3652-1202425455/nature/oceans/3652-victoria-beach-laguna-beach-california.jpg'>");
    $("ul li:eq("+(i++)+")").html("<img src='http://www.traveltovietnam.cc/Upload/Tour/2352008111155_SplendorOfMuiNeBeachMuiNe2.jpg'>");
    $("ul li:eq("+(i++)+")").html("<img src='http://www.get-free-wallpapers.com/wallpaper/previews/3652-1202425455/nature/oceans/3652-victoria-beach-laguna-beach-california.jpg'>");
}  
// Start the ball rolling
setTimeout(fadeDivs, 3000);
});

32 個の li タグがありますが、(最初の) 4 個の html のみを変更します。

これはあなたが探している動作ですか？それとも、画像を一度に 1 セルずつフラッシュしますか? あなたの質問を誤解した場合は、お詫び申し上げます。

編集：

fadeDivs() 関数を変更し、li タグをトラバースするために使用するグローバル変数「panelIndex」を追加しました。

var panelIndex = 0;
function fadeDivs()
{
var previousIndex = panelIndex > 0 ? panelIndex - 1 : 0;
var previousPanel = $("ul li:eq("+previousIndex+")");
var uiLength = $("ul li").length;

previousPanel.fadeOut(100);
// If the next panel to fade in is beyond the last, start from the beginning again.
if(panelIndex == (uiLength - 1)){
    panelIndex = 0;
}
 $("ul li:eq("+panelIndex+")").fadeIn(100);
 panelIndex++;
// Keep the ball rolling
setTimeout(fadeDivs, 500);
}

この関数は、すべての li コンテンツを 1 つずつ表示し、最後に到達すると最初のセルに戻ります。したがって、最初のセルで 4 つの画像、2 番目のセルで 4 つの画像などをフラッシュします。

これはあなたが探している動作ですか、それともこれに基づいて構築できますか?

于 2013-05-14T06:13:40.670 に答える