开发者

How to stop all animation in this image slider carousel UNLESS the arrow is clicked?

开发者 https://www.devze.com 2023-02-20 15:51 出处:网络
The carousel is located at http://www.indicatorwarehouse.com/index-3-27-11.html What the site owner wants to do is have the image slider stay still unless someone clicks the green arrows, and then it

The carousel is located at http://www.indicatorwarehouse.com/index-3-27-11.html

What the site owner wants to do is have the image slider stay still unless someone clicks the green arrows, and then it will move just once. Alternatively, he wants it to slide VERY slownly, perhaps once every 5 minutes. The code for this slider is below...please bear in mind I have no clue what any of this code means, I'm a total novice with js. Thank you very much! :)

$(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(functi开发者_JAVA百科on(){
            $(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);


To set animation slide every 5 mins change:

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

to

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


To sliding one by one try to change this:

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

with this:

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


carousel.stop(true)

it works.. try this once

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号