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 内容逐个显示，并在到达末尾时返回第一个单元格。所以它在第一个单元格闪烁 4 个图像，在第二个单元格闪烁 4 个图像，依此类推。

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

于 2013-05-14T06:13:40.670 回答