設置循環5次的問題

我正在用jQuery構建滑塊。我的目標的參考是滑塊yahoo.com 設置循環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

<!--Comienza codigo del slide--> 

<div id="bigboxset"> 

<!--Paid Sponsorship--> 

<div id="sponsorbox"> 

<div><img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" /> 
      </div> 

      <div id="tbdescpleft"> Preciosa Casa en Venta 1´450,000</div> 


<div><img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" /> 
     </div> 
     <div id="tbdescpleft"> Preciosa Casa en Venta 1´450,000</div> 

<div><img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" /> 
     </div> 
     <div id="tbdescpleft"> Preciosa Casa en Venta 1´450,000</div> 

</div> 


<!--End Paid Sponsorship--> 


<!-- wrapper para imagen grande --> 
<div id="image_wrap"> 

<!--NAvegador en el image_wrap--> 

<div id="navslid"> </div> 

<!--Termina NAvegador en el image_wrap--> 

    <!-- Initially the image is a simple 1x1 pixel transparent GIF --> 
    <img src="images/blank.gif" width="500" height="375" /> 
</div> 

<!-- Termina wrapper para imagen grande --> 


<!--Slide Izquierda con Destaques--> 

<div class="wrapmins"> 
<!-- "previous page" action --> 
<a class="prev browse left"></a> 

<!-- root element for scrollable --> 
<div class="scrollable" id="scrallable"> 

    <!-- root element for the items --> 
    <div class="items"> 

    <!-- 1-5 --> 
    <div> 
     <div><img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf.jpg" /> 
     <div id="tbdescp"> Preciosa Casa en Venta 1´450,000</div> 
     </div> 

     <div><img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730.jpg" /> 
     <div id="tbdescp"> Preciosa Casa en Venta 1´450,000</div> 
     </div> 

     <div><img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49.jpg" /> 
     <div id="tbdescp"> Preciosa Casa en Venta 1´450,000</div> 
     </div> 

     <div><img src="http://farm1.static.flickr.com/28/66523124_b468cf4978.jpg" /> 
     <div id="tbdescp"> Preciosa Casa en Venta 1´450,000</div> 
     </div> 

     <div><img src="http://farm1.static.flickr.com/28/66523124_b468cf4978.jpg" /> 
     <div id="tbdescp"> Preciosa Casa en Venta 1´450,000</div> 
     </div> 
    </div> 

    <!-- 5-10 --> 
    <div> 
     <div><img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" /> 
     <div id="tbdescp"> Preciosa Casa en Venta 1´450,000</div> 
     </div> 

     <div><img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" /> 
     <div id="tbdescp"> Preciosa Casa en Venta 1´450,000</div> 
     </div> 

     <div><img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" /> 
     <div id="tbdescp"> Preciosa Casa en Venta 1´450,000</div> 
     </div> 

     <div><img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" /> 
     <div id="tbdescp"> Preciosa Casa en Venta 1´450,000</div> 
     </div> 

     <div><img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" /> 
     <div id="tbdescp"> Preciosa Casa en Venta 1´450,000</div> 
     </div> 
    </div> 

    <!-- 10-15 --> 
    <div> 
     <div><img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf.jpg" /> 
     <div id="tbdescp"> Preciosa Casa en Venta 1´450,000</div> 
     </div> 

     <div><img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730.jpg" /> 
     <div id="tbdescp"> Preciosa Casa en Venta 1´450,000</div> 
     </div> 

     <div><img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49.jpg" /> 
     <div id="tbdescp"> Preciosa Casa en Venta 1´450,000</div> 
     </div> 

     <div><img src="http://farm1.static.flickr.com/28/66523124_b468cf4978.jpg" /> 
     <div id="tbdescp"> Preciosa Casa en Venta 1´450,000</div> 
     </div> 

     <div><img src="http://farm1.static.flickr.com/28/66523124_b468cf4978.jpg" /> 
     <div id="tbdescp"> Preciosa Casa en Venta 1´450,000</div> 
     </div> 
    </div> 

    </div> 

</div> 

<!-- "next page" action --> 
<a class="next browse right"></a> 
</div> 


<div id="actionButtons"> 
    <input type="image" src="images/atras.png" onclick="api.prev();" > 

    <input type="image" src="images/pause.png" class="pause" onclick="toggle(this);" > 

    <input type="image" src="images/adelante.png" onclick="api.next();" > 
</div> 






<!--termina Slide Izquierda con Destaques--> 

</div> 
<!--Termina codigo del slide-->

CSS

/* 
    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; 
}

這裏是一個小提琴

http://jsfiddle.net/SmW3F/1/

來源

2013-05-15 Jules Martinez

更新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);

見jsFiddle

來源

2013-05-15 22:18:22 Justin

非常好，簡單的解決方案我是做了很多困難的編碼，JA！即時通訊開始到計算器的愛情，我學到了很多 –

高興它爲你工作。我意識到，一旦你完成了，你需要重置滾動縮略圖到開始。看到我更新的代碼和jsFiddle。 – Justin

設置循環5次的問題

回答

相關問題