开发者

How can I set fadein and fadeout sildeshow of images in JQuery continusly without any event?

开发者 https://www.devze.com 2023-01-15 07:13 出处:网络
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 an

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...

0

精彩评论

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