Javascript 在jquery div和image中创建无限循环的正确方法

我有一个代码可以显示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);
});

在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>

内容1
内容2
内容3
内容4

现在我想把它应用到矩阵中的所有8个卡片单元格，但我无法使它工作，当计数器中达到5时，它停止，并且在除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);
});

此函数逐个显示所有li内容，并在到达末尾时返回到第一个单元格。因此，它在第一个单元格闪烁4个图像，在第二个单元格闪烁4个图像，以此类推

---

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

不填充所有100%，就像只填充99%为什么？如果要为边框留出空间，可以使用

框大小：border-box

，除非我遗漏了CSS，否则我认为这里有两个问题：（1）尝试在函数开头将currentPanelIndex设置为0。（2） $（“ul li:visible”）可能返回所有可见的列表元素，而不仅仅是一个可见的列表元素。我将通过索引显示/隐藏列表项，而不是像.next（）这样的DOM遍历方法来构造这段代码。能否在您的答案@MichaelSanchez（）中添加一个JSFIDLE？嗨，Andrea，我使用了cMinor的JFIDLE并删除了一些元素，以便更好地查看我的图像显示实现

$(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);
});

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);
}