1

我正在尝试修改幻灯片以在鼠标位于后退或下一个箭头上时连续动画。如果鼠标离开，我希望动画在原处停止。

我发现这篇文章和这篇文章有助于告诉我我需要使用 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');
        }

        });

这是我想要实现的一个例子（我知道它是 flash，但我认为它也可以用 jQuery 完成）。

这是迄今为止我所有工作的小提琴。

感谢您的任何帮助。

4

1 回答 1

0

我想我已经接近解决方案了。这是我的想法。每个都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');

};

});

干得好！

于 2013-09-10T22:52:29.013 回答