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');
        }

        });

これは私が達成しようとしていることの例です(フラッシュであることは知っていますが、jQuery でも実行できると思います)。

これは、これまでのすべての作業を含むフィドルです。

助けてくれてありがとう。

4

1 に答える 1

0

解決に近づいたと思います。これが私の考えです。すべてul.imgHolder liが 20px の多くのブロックに分割されているため (もちろんサイズを変更できます)、div のサイズが 980px の場合、画像用に 49 個のブロックがあります。

speedマウスオーバー イベントが発生すると、マウスアウトが発生するまでミリ秒ごとにブロックをスライドさせます。

スライドの右ボタンのみ実装し、ロジックを一部削除しました、すみません！

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 に答える