How can I set simple JQuery slideshow with CSS continuously, without any event like mouse开发者_高级运维 hover, click etc.?
write a function that does a slidehsow. use settimeout
give it an interval and call your function.
see an example here: Cycle css backgrounds
Most functions like that in jQuery are called, or at least initialized, in the $(document).ready()
call. Simply include a timing command like setInterval
that returns your function and it will run when the DOM is loaded, like:
$(document).ready(function(){
var t = setInterval(mySlideShow, 3000)
});
Or, if the function repeats itself, simply invoke the function on ready()
:
$(document).ready(function(){
mySlideShow();
});
Edit:
As requested, the simplest slideshow I can think of is something like this:
<div id="slideshow">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
</div>
CSS:images should be set to display:none
Then jQuery:
$(document).ready(function(){ $('#slideshow img:first-child').addClass('shown').show(); setInterval(slideShow,3000); }); //and here is the function function slideShow() { $('#slideshow img:last-child').prependTo($('#slideshow')).fadeIn(1000); $('.shown').fadeOut(1000).removeClass('shown'); }
Might not be perfect for you but you can see where I'm going with it at least...
精彩评论