Question

我正在尝试修改幻灯片，以便在鼠标悬停在后面或下一个箭头上时连续进行动画制作。如果鼠标离开，我希望动画停在原处。

我发现this post和this post有助于告诉我需要使用setInterval，但由于我是初学者，我不知道如何使用我的代码实现它。我尝试更新计数器变量中设置的毫秒，但没有改变任何东西。

到目前为止，这是悬停代码。它会在悬停时提升图像，但不会连续。

        $(document).ready(function(){
        var thumbs = $('ul.thumbHolder li');
        var bigImgs = $('ul.imgHolder li');
        var mask = $('.imgHolder');
        var imgW = $('ul.imgHolder li').width();
        var speed = 800;

        thumbs.removeClass('selected').first().addClass('selected');

        thumbs.click(function () {
        var target = $(this).index();

        mask.animate({
        'left': '-' + imgW * target + 'px'
        }, speed);


        thumbs.removeClass('selected');
        $(this).addClass('selected');
        });


        $('.Bleft').on('mouseover', function () {
            var i = $('ul.thumbHolder li.selected').index();
            i--;

            $('ul.thumbHolder li.selected').removeClass('selected');
            thumbs.eq(i).addClass('selected');

            if (i === -1) {
                mask.animate({
                    'left': '-' + imgW * $('ul.thumbHolder li').index() + 'px'
                }, speed);
            } else {
                mask.animate({
                    'left': '-' + imgW * i + 'px'
                }, speed);
            }
            clearInterval(counter);
        });

        $('.Bright').on('mouseover', function () {
        var i = $('ul.thumbHolder li.selected').index();
        i = i >= thumbs.length - 1 ? 0 : i + 1;

        $('ul.thumbHolder li.selected').removeClass('selected');
        thumbs.eq(i).addClass('selected');

        mask.animate({
        'left': '-' + imgW * i + 'px'
        }, speed);
        clearInterval(counter);
        });
        var count = 0;
        var counter = window.setInterval(timer, 5000);

        function timer() {
        count = count + 0;
        if (count >= 0) {
        count = 0;
        return;
        }
        mask.animate({
        'left': '-' + imgW * count + 'px'
        }, speed);
        thumbs.removeClass('selected');
        thumbs.eq(count).addClass('selected');
        }

        });

This is an example of what I am trying to achieve（我知道它是flash，但我认为它也可以用jQuery完成）。

This is a fiddle that has all my work so far.

感谢您的帮助。

Answer 1

我认为我接近解决方案。这是我的想法。每个ul.imgHolder li被划分为20px的许多块（您可以更改当然的大小），因此如果div的大小为980px，则将有49个块用于图像。

当触发mouseover事件时，我将每隔speed毫秒滑动一个块，直到触发mouseout。

我只实现了右侧滑动按钮，我已经部分删除了一些逻辑，对不起！

var $ = jQuery.noConflict(true);
$(document).ready(function(){
var thumbs = $('ul.thumbHolder li');
var bigImgs = $('ul.imgHolder li');
var mask = $('.imgHolder');
var imgW = $('ul.imgHolder li').width(); //Assuming imgW % 20 = 0
var blockSize = 20; //20px
var blocksPerThumb = imgW/blockSize;
var numBlocks = (blocksPerThumb)*thumbs.length;
var speed = 400;
var blockPos = 0;
var currentAnim = null;

thumbs.removeClass('selected').first().addClass('selected');

thumbs.click(function () {
    var target = $(this).index();

    mask.animate({
        'left': '-' + imgW * target + 'px'
    }, speed,'linear');


    thumbs.removeClass('selected');
    $(this).addClass('selected');
});


$('.Bleft').on('mouseover', function () {

});

$('.Bright').on('mouseover', function(){
    currentAnim = setInterval(goRight,speed);
}).mouseout(function(){
    clearInterval(currentAnim);
});

var goRight =  function () {
    blockPos = (blockPos+1)%numBlocks;

    mask.animate({
        'left': '-' + blockSize * blockPos + 'px'
    }, speed,'linear');

};

});

干得好！

当鼠标悬停在div上时，如何使用setInterval继续动画

1 个答案: