jQuery - 根據長度獲得長度和觸發點擊增量

Question

對不起，如果我完全錯過了標題，我不完全確定如何說出我正在努力實現的目標。任何幫助將是偉大的！

在空閒時間的過去幾個月裏，我一直在設置自己的任務來幫助自己理解和學習javascript/jQuery。到目前爲止，一切進展順利，但我在路上遇到了一些障礙！

基本上我創建的是一個非常簡單的選項卡式內容與變化的橫幅。當您單擊選項卡，相關的旗幟淡入和以前橫幅淡出

這裏有一個小提琴：http://jsfiddle.net/unn9s4yf/

所以我想要做什麼，在哪裏我有點卡住是我您可以每隔10秒左右以標籤順序淡入和淡出，以使橫幅自動「旋轉」。

那麼像觸發器點擊那樣，但我覺得好像這是錯誤的路要走？

$('.thumb' + idAttr).trigger("click"); 

附加超時？我不確定？我也不確定每次如何增加它，所以如果這是選擇的方法，它將如何從第一個拇指開始，然後點擊2,3,4和4等等。

我有使用

var thumbCount = $('#thumbs a').length; 

它返回15這是正確的股利內大拇指的數量。所以我想它會是什麼時候idAttr = .length從1重新開始？

當我將鼠標懸停在主橫幅或縮略圖上時，我還想暫停「自動點擊」功能，但我不知道這是否可以實現？

我知道我在這裏問很多......至少我認爲我是。但任何幫助或任何這方面的指導將大規模讚賞。

謝謝你的時間！

Answer 1

我分叉你的jsfiddle並試圖做你所問。

http://jsfiddle.net/OxyDesign/2g5Lav12/

它改變了每3秒，又回到第一個拇指最後一個大拇指後，在mouseenter &次停在mouseleave（在大拇指&旗），並在上click &次停在第二click同樣的拇指。

HTML

<div id="container"> 

    <div id="thumbs"> 
     <a class="thumb active"></a> 
     <a class="thumb"></a> 
     <a class="thumb"></a> 
     <a class="thumb"></a> 
     <a class="thumb"></a> 
     <a class="thumb"></a> 
     <a class="thumb"></a> 
     <a class="thumb"></a> 
     <a class="thumb"></a> 
     <a class="thumb"></a> 
     <a class="thumb"></a> 
     <a class="thumb"></a> 
     <a class="thumb"></a> 
     <a class="thumb"></a> 
     <a class="thumb"></a> 
    </div> 

    <div id="banner"> 
     <div class="banner active"></div> 
     <div class="banner"></div> 
     <div class="banner"></div> 
     <div class="banner"></div> 
     <div class="banner"></div> 
     <div class="banner"></div> 
     <div class="banner"></div> 
     <div class="banner"></div> 
     <div class="banner"></div> 
     <div class="banner"></div> 
     <div class="banner"></div> 
     <div class="banner"></div> 
     <div class="banner"></div> 
     <div class="banner"></div> 
     <div class="banner"></div> 
    </div> 

</div> 

CSS

#container {width: 960px; margin: 0 auto;} 
div, 
a {float: left; display: block;} 

#thumbs {width: 600px;} 
.thumb {width: 110px; height: 156px; margin: 0 10px 10px 0; cursor: pointer;} 
.thumb:hover, 
.thumb.active, 
.thumb.clicked {opacity: 0.5;} 

.thumb:nth-child(even) {background: #ccee44;} 
.thumb:nth-child(odd) {background: #ff33dd;} 

#banner {width: 360px;} 
.banner {width: 360px; height: 488px; position: absolute; display: none;} 
.banner.active {display: block;} 

.banner:nth-child(even) {background: #ccee44;} 
.banner:nth-child(odd) {background: #ff33dd;} 

JS

$(document).ready(function() { 
    var thumbs = $('.thumb'), 
     firstThumb = thumbs.eq(0), 
     banners = $('.banner'), 
     all = thumbs.add(banners), 
     duration = 3000, 
     rotating = false, 
     intervalRotate; 

    function setAutoRotate(){ 
     intervalRotate = setInterval(autoRotate,duration); 
     rotating = true; 
    } 

    function stopAutoRotate(){ 
     clearInterval(intervalRotate); 
     rotating = false; 
    } 

    function autoRotate(){ 
     var nextThumb = thumbs.filter('.active').next(); 
     if(!nextThumb.length) nextThumb = firstThumb; 
     rotate(nextThumb); 
    } 

    function rotate(activeThumb){ 
     thumbs.removeClass('active'); 
     activeThumb.addClass('active'); 
     banners.removeClass('active').eq(thumbs.index(activeThumb)).addClass('active'); 
    } 

    thumbs.on('click',function(e){ 
     e.preventDefault(); 
     var thumb = $(this); 
     if(thumb.hasClass('clicked')){ 
      thumb.removeClass('clicked'); 
     }else{ 
      stopAutoRotate(); 
      thumbs.removeClass('clicked'); 
      thumb.addClass('clicked'); 
      rotate(thumb); 
     } 
    }); 

    all.on('mouseenter',function(){ 
     if(rotating) stopAutoRotate(); 
    }); 

    all.on('mouseleave',function(){ 
     if(!thumbs.filter('.clicked').length) setAutoRotate(); 
    }); 

    setAutoRotate(); 

}); 

它是你想要的行爲？

Answer 2

用超時觸發點擊應該可以正常工作。如果你不希望它結束​​，你甚至可以遞歸地做。此外，您還可以設置一個變量來決定何時停止轉動

$(function() { 
    $('.thumb').click(function(event, isAutoClick){ 
     //Is Not automatic click, set false 
     if (!isAutoClick) isRotationActive = false; 

     //Other Click Code 
    }); 

    //If hover over banner, stop rotation 
    $("#banner").on("mouseover", function() { 
     isRotationActive = false; 
    }); 

    rotate($(".thumb"), 0); 
}); 

var isRotationActive = true; 

function rotate($clickables, currentIndex) { 

    //Make sure currentIndex is valid 
    currentIndex = currentIndex % $clickables.length; 

    //Trigger current click 
    $clickables.eq(currentIndex).trigger("click", [true]); //Passes [true] for isAutoClick 

    //Call again in 1 second with the next index 
    setTimeout(function() { 
     isRotationActive && rotate($clickables, currentIndex + 1) 
    }, 1000); 
} 

更新小提琴這裏：http://jsfiddle.net/unn9s4yf/3/

Answer 3

的其他解決方案：

var thumbs = $('.thumb'); 
var currentThumb = 0; 
var changingStopped = false; 

var changeBanner = function() { 
    console.log(thumbs.eq(currentThumb)); 
    thumbs.eq(currentThumb).click(); 
    currentThumb >= thumbCount - 1 ? currentThumb = 0 : currentThumb++; 
    setTimeout(function() { 
     checkIfChange(); 
    }, 1000); 
} 
// triggers 'changeBanner()' if the user isn't currently stopping it. 
var checkIfChange = function() { 
    if (!changingStopped) 
    { 
     changeBanner(); 
    } 
} 

// makes the rotation stop 
$('.thumb').mouseenter(function() { 
    changingStopped = true; 
    $(this).trigger('click'); // Assuming you want the hovered-over thumb to be displayed in the banner. 
    currentThumb = $(this).index() + 1; // Additional Option to make the rotation begin again from the current thumb. 
}); 

// makes the rotation start again 
$('.thumb').mouseleave(function() { 
    changingStopped = false; 
    checkIfChange(); 
}); 

checkIfChange(); 

見JSFiddle。乾杯!