开发者

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

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

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜