Javascript 设置循环中的循环5次时出现问题

我正在用jQuery构建一个滑块。我的目标的参考是滑块

我的问题，或问题，在缩略图通过5后，我需要它们“滑动”（就像单击“下一步”时一样），以显示接下来的5个缩略图。如何触发“下一步”功能使缩略图与幻灯片同步

这是一个循环：

var count = 0;
setInterval(function(){
    count++; // add to the counter
    if($(".items img").eq(count).length != 0){
        console.log($(".items img").eq(count));
        $(".items img").eq(count).trigger("mouseover");
    } else count = 0; //reset counter

},2000);

以下是我的全部代码：

HTML

JS

这是一把小提琴

---

更新

setInterval

以检查模数0。在结束时，您需要返回到开始，因此我添加了一个while循环以向后滚动

var count = 0;
var scroll_count = 0;
setInterval(function()
{
    count++;
    if($(".items img").eq(count).length != 0)
    {            
        $(".items img").eq(count).trigger("mouseover");

        if(count % 5 === 0)
        {                
            api.next();  
            scroll_count++;
        }            
    }
    else
    {
        count = 0; //reset counter
        // Ideally, instead of this while loop, there would  
        // be a single call to a function like api.first() or whatever.
        while(scroll_count--)
        {               
            api.prev(); // scroll to beginning
        }
    }
},2000);

---

请参见

非常好且简单的解决方案我在做更难的编码，哈！，我开始喜欢stackoverflow了，我很高兴它对你有用。我意识到，一旦你得到了结束，你需要重置滚动缩略图的开始。请参阅我的更新代码和JSFIDLE。

/*
  root element for the scrollable.
  when scrolling occurs this element stays still.



  */


  .wrapmins { width: 760px; height:120px;}

.scrollable {

    /* required settings */
    position:relative;
    overflow:hidden;
    width: 680px;
    height:150px;
    left:0;

    /* custom decorations 
    border:1px solid #ccc;
    background:url(../images/h300.png) repeat-x;*/
}

/*
   root element for scrollable items. Must be absolutely positioned
   and it should have a extremely large width to accomodate scrollable
   items.  it's enough that you set the width and height for the root
   element and not for this element.
*/
.scrollable .items {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
    clear:both;
}

.items div {
    float:left;
    width:740px;
}

.items div div{
    float:left;
    width:134px;
}

.items div div div{
    float:left;
    width:82px;
    font-size:10px;
    margin-left:15px;
}

/* single scrollable item */
.scrollable img {
float: left;
margin: 5px 30px 5px 0px;
background-color: #fff;
padding: 10px;
border: 1px solid #ccc;
width: 82px;
height: 62px;
}

/* active item */
.scrollable .active {
    border:1px solid #ddd;
    position:relative;
    cursor:default;
    border-bottom:3px solid skyblue;
}

/* this makes it possible to add next button beside scrollable */
.scrollable {
    float:left;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
    background:url(../images/hori_large.png) no-repeat;
    display:block;
    width:30px;
    height:30px;
    float:left;

    cursor:pointer;
    font-size:1px;
    position:absolute;
}

/* right */
a.right { margin-top:40px; margin-left: 640px; background-position: 0 -30px; clear:right; }
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; }


/* left */
a.left { margin-top:40px; margin-left: -30px;  }
a.left:hover  { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }

/* up and down */
a.up, a.down  {
    background:url(../images/vert_large.png) no-repeat;
    float: none;
    margin: 10px 50px;
}

/* up */
a.up:hover { background-position:-30px 0; }
a.up:active { background-position:-60px 0; }

/* down */
a.down { background-position: 0 -30px; }
a.down:hover { background-position:-30px -30px; }
a.down:active { background-position:-60px -30px; }


/* disabled navigational button */
a.disabled {
    visibility:hidden !important;
}


/* styling for the image wrapper  */
#image_wrap {
    /* dimensions */
    width:500px;
    padding:15px 0;
    margin-left:138px;
    margin-bottom:5px;
    height:380px;

    /* centered */
    text-align:center;

    /* some "skinning" 
    background-color:#efefef;*/
    border:1px solid #fff;
    outline:1px solid #ddd;
    -moz-ouline-radius:4px;
}

#image_wrap img {
    width:425px;
    height:350px;
    margin-top:17px;}

#sponsorbox {
    float:left;
    margin:0px;
    width:135px;
    height:410px;}  

#sponsorbox div {
    float:left;
    padding:10px; 
    border:1px solid #ccc;
    margin-bottom:0px;
        font-size:10px;}    

#sponsorbox div img {
    width:82px;
    height:62px;}   

#sponsorbox #tbdescpleft {
    width:82px;
    margin-bottom:13px;
    border:0px solid #ccc;} 


#navslid {
    float:left;
    width:425px;
    height:35px;
    background-color:#CCC;
    position:absolute;
    margin-left:37px;
    margin-top:17px;
    ;}

$(function() {
var root = $(".scrollable").scrollable({circular: false}).autoscroll({ autoplay: true });

$(".items img").on("hover",function() {
    // see if same thumb is being clicked
    if ($(this).hasClass("active")) { return; }

    // calclulate large image's URL based on the thumbnail URL (flickr specific)
    var url = $(this).attr("src").replace("_t", "");

    // get handle to element that wraps the image and make it semi-transparent
    var wrap = $("#image_wrap").fadeTo("medium", 0.5);

    // the large image from www.flickr.com
    var img = new Image();


    // call this function after it's loaded
    img.onload = function() {

        // make wrapper fully visible
        wrap.fadeTo("fast", 1);

        // change the image
        wrap.find("img").attr("src", url);

    };

    // begin loading the image from www.flickr.com
    img.src = url;

    // activate item
    $(".items img").removeClass("active");
    $(this).addClass("active");

// when page loads simulate a "click" on the first image
}).filter(":first").trigger("mouseover");

var count = 0;
setInterval(function(){
    count++; // add to the counter
    if($(".items img").eq(count).length != 0){
        console.log($(".items img").eq(count));
        $(".items img").eq(count).trigger("mouseover");
    } else count = 0; //reset counter

},5000);

// provide scrollable API for the action buttons
window.api = root.data("scrollable");

});


function toggle(el){
    if(el.className!="play")
    {
        el.className="play";
         el.src='images/play.png';
        api.pause();
    }
    else if(el.className=="play")
    {
        el.className="pause";
         el.src='images/pause.png';
        api.play();
    }

    return false;
}

var count = 0;
var scroll_count = 0;
setInterval(function()
{
    count++;
    if($(".items img").eq(count).length != 0)
    {            
        $(".items img").eq(count).trigger("mouseover");

        if(count % 5 === 0)
        {                
            api.next();  
            scroll_count++;
        }            
    }
    else
    {
        count = 0; //reset counter
        // Ideally, instead of this while loop, there would  
        // be a single call to a function like api.first() or whatever.
        while(scroll_count--)
        {               
            api.prev(); // scroll to beginning
        }
    }
},2000);