Question

对不起，如果我完全错过了标题，我不完全确定如何说出我想要实现的目标。任何帮助都会很棒!!

在过去的几个月里，在我的空闲时间里，我一直在设置自己的任务来帮助自己理解和学习javascript / jQuery。到目前为止一切进展顺利，但我在路上遇到了一些冲击！

基本上我创建的是一组非常简单的标签内容，其中包含不断变化的横幅。单击选项卡时，相关横幅将淡入，前一个横幅淡出

这是一个小提琴：http://jsfiddle.net/unn9s4yf/

所以我想做的事情和我陷入困境的地方是我希望横幅自动“旋转”，每隔10秒左右以标签顺序淡入和淡出。

有点像触发点击，但我觉得这样做是错误的方式？

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

附加超时？我不确定？我也不确定如何每次都增加它，所以如果这是选择的方法，它将如何从拇指1开始，然后点击2,3,4和...等等？

我使用

获得了div内的拇指数量

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

返回15是正确的。所以我猜它会像idAttr = .length从1开始重新开始？

当我将鼠标悬停在主横幅或缩略图上时，我也希望能够暂停“自动点击”功能，我不知道这是否可以实现？

我知道我在这里问了很多......至少我想我是。但是，对此任何部分的任何帮助或指导都将受到广泛赞赏。

感谢您的时间！

Answer 1

触发超时点击应该可以正常工作。如果你不想让它结束，你甚至可以递归地做。此外，您可以设置变量以决定何时停止旋转

$(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 2

附加解决方案：

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

Answer 3

我分叉你的jsfiddle，并试着做你所要求的。

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

每3秒更换一次，在最后一个拇指后回到第一个拇指，在mouseenter＆amp;在mouseleave上播放（在拇指和横幅上），然后停在click＆amp;在同一个拇指上播放第二个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();

});

这是你想要的行为吗？

jQuery - 获取长度并根据长度以增量触发单击

3 个答案: