Question

轮播位于http://www.indicatorwarehouse.com/index-3-27-11.html

网站所有者想要做的是让图片滑块保持静止，除非有人点击绿色箭头，然后它只会移动一次。或者，他希望它非常缓慢地滑动，也许每5分钟一次。这个滑块的代码如下...请记住我不知道这个代码的含义是什么，我是js的新手。非常感谢你！：）

$(document).ready(function(){
    $('#sliderGallery').Slider();
});

(function($){
$.fn.Slider = function(params){
    var defaults = {
        moveLeft: true,
        onItem: false,
        isAnimating: false,
        timer: null
    },
    intialize = function(id){

/////////////////////////////////////////////////////////////
/////     Bind Hover Events on Left & Right Buttons     /////
/////////////////////////////////////////////////////////////
        $('div#leftButton').hover(function(){
            $(this).addClass('leftImageHov');
            clearInterval(defaults.timer);
        },function(){
            $(this).removeClass('leftImageHov');
            setTimer();
        });
        $('div#rightButton').hover(function(){
            $(this).addClass('rightImageHov');
            clearInterval(defaults.timer);
        },function(){
            $(this).removeClass('rightImageHov');
            setTimer();
        });

/////////////////////////////////////////////////////////////
/////         Stop Animation on Hovering Items          /////
/////////////////////////////////////////////////////////////
        $('#canvas ul li').hover(function(){
            clearInterval(defaults.timer);
        },function(){
            setTimer();
        });

/////////////////////////////////////////////////////////////
/////        Get Size of the #Canvas ul & Set It        /////
/////////////////////////////////////////////////////////////
        var li = $('#canvas ul li');
        var liWidth = li.eq(0).width();
        var liCount = li.length;
        $('#canvas ul').css({width: liWidth*liCount + 'px', left: '0px'});

/////////////////////////////////////////////////////////////
/////    Bind Click Event on the Left & Right Buttons   /////
/////////////////////////////////////////////////////////////   
        var leftLimit = (liWidth*liCount) - $('div#canvas').width();
        $('div#leftButton').click(function(){
            if(!defaults.isAnimating)
                Animate(liWidth, 600, leftLimit);
        });
        $('div#rightButton').click(function(){
            if(!defaults.isAnimating)
                Animate((-1*liWidth), 600, leftLimit);
        }); 

        setTimer();
    },
    setTimer = function(){
        defaults.timer = setInterval(doAnimation, 30000 );      
    },
    Animate = function(amount, time, leftLimit){
        defaults.isAnimating = true;
        var leftVal = $('div#canvas ul').css('left');
        leftVal = leftVal.replace('px','');
        leftVal = leftVal*1;
        amount += leftVal;

/////////////////////////////////////////////////////////////
/////                    Range Check                    /////
/////////////////////////////////////////////////////////////   
        if(amount < (-1*leftLimit)) { amount = (-1*leftLimit); defaults.moveLeft = false; }
        if(amount > 0) { amount = 0; defaults.moveLeft = true; }

        $('div#canvas ul').animate({
            left: amount
        }, time, function() { defaults.isAnimating=false; });
    },

/////////////////////////////////////////////////////////////
/////                     Animation                     /////
/////////////////////////////////////////////////////////////
    doAnimation = function(){
        var li = $('#canvas ul li');
        var liWidth = li.eq(0).width();
        var liCount = li.length;
        var leftLimit = (liWidth*liCount) - $('div#canvas').width();
        var animValue = liWidth*3;
        if(defaults.moveLeft) animValue *= -1;
        else animValue = leftLimit;
        Animate(animValue, 0, leftLimit);  
    }

    return this.each(function(){
        intialize(this);
    });
}
})(jQuery);

Answer 1

每隔5分钟设置动画幻灯片：

setTimer = function(){
        defaults.timer = setInterval(doAnimation, 30000 );      
    },

到

setTimer = function(){
        defaults.timer = setInterval(doAnimation, 150000 );      
    },

Answer 2

要逐个滑动，请尝试更改：

var leftLimit = (liWidth*liCount) - $('div#canvas').width();
        $('div#leftButton').click(function(){
            if(!defaults.isAnimating)
                Animate(liWidth, 600, leftLimit);
        });
        $('div#rightButton').click(function(){
            if(!defaults.isAnimating)
                Animate((-1*liWidth), 600, leftLimit);
        });

用这个：

var leftLimit = (liWidth*liCount) - $('div#canvas').width();
        $('div#leftButton').click(function(){
            if(!defaults.isAnimating)
                Animate(liWidth, 100, leftLimit);
        });
        $('div#rightButton').click(function(){
            if(!defaults.isAnimating)
                Animate((-1*liWidth), 100, leftLimit);
        });

Answer 3

carousel.stop(true)

它有效..尝试一次

如何停止此图像滑块旋转木马中的所有动画除非单击箭头？

3 个答案: