Question

我有一个代码可以显示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以外的其他单元格中显示图像，如何解决问题？

please take a look at my fiddle

Answer 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内容，并在到达结尾时返回第一个单元格。因此它在第一个单元格闪烁4个图像，在第二个单元格闪烁4个图像等等。

这是您正在寻找的行为，还是可以在此基础上构建？

在jquery div和图像中进行无限循环的正确方法

1 个答案: