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
精彩评论