How to Auto slide with jQuery
how can i auto slide this slider link text i have little knowledge on jQuery and less on how to do this. the thing is that this slider slides when i click on an image but i also want this to start sliding automatic and when i hover on it it stops / pause sliding and then when i point my mouse out it continues sliding...
here is wat im using to slide the images on click
jQuery( document ).ready( function(){
jQuery( '#flip' ).jcoverflip({
current: 2,
beforeCss: function( el, container, offset ){
return [
$.jcoverfli开发者_如何学运维p.animationElement( el, { left: ( container.width( )/2 - 210 - 110*offset + 20*offset )+'px', bottom: '40px' }, { } ),
$.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20*offset*offset) + 'px' }, {} )
];
},
afterCss: function( el, container, offset ){
return [
$.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 110 + 110*offset )+'px', bottom: '40px' }, { } ),
$.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20*offset*offset) + 'px' }, {} )
];
},
currentCss: function( el, container ){
return [
$.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 100 )+'px', bottom: 0 }, { } ),
$.jcoverflip.animationElement( el.find( 'img' ), { width: '200px' }, { } )
];
},
}); });
I would be grateful if someone can help me with this...
I think something like this should work:
jQuery(function() { //This is the same that document ready. If you already are in document ready function you shouldnt put this line.
var move = true;
jQuery("#flip").hover(function() {
move = false;
}, function() {
move = true;
});
setTimeout(function() {
if(move) {
var eq = $("#flip").find("li").index($("#flip").find("li.current"));
eq++;
if ($("#flip").find("li:eq(" + eq + ")").length == 0)
eq = 0;
$("#flip").find("li:eq(" + eq + ")").click();
}
}, 600);
});
The current li should have "current" class.
The last update:
You had this code in the change event:
jQuery('#scrollbar').slider('value', ui.to -1);
It does not work, don't know why. Add in change event these lines (before the one you already have because it throws an error):
jQuery('#flip li.current').removeClass("current");
jQuery('#flip li:eq(' + ui.to + ')').addClass("current");
Also I made some changes to my code so that when it ends it start moving back. Here it is:
var move = 1,
moving = true;
jQuery("#flip").hover(function() {
moving = false;
}, function() {
moving = true;
});
setInterval(function() {
if(moving) {
var eq = $("#flip").find("li").index($("#flip").find("li.current"));
if(move == 1)
eq++;
else
eq--;
if(eq == -1) {
eq = eq + 2;
move = 1;
}
if ($("#flip").find("li:eq(" + eq + ")").length == 0) {
eq = eq - 2;
move = 0;
}
$("#flip").find("li:eq(" + eq + ")").click();
}
}, 600);
精彩评论