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。干杯!