javascript - A simple jQuery slideshow to work for DIV - Stack Overflow

admin管理员组

文章数量:1355671

I just found that it is possible to make a very simple slideshow by jQuery as

$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});

with

<div class="fadein">
<img src=".jpg">
<img src=".jpg">
<img src=".jpg">
</div>

I wonder how to modify this simple code to make a slide effect (fadeIn/fadeOut) for DIV instead of img. For example to make a slideshow of

<div class="fadein">
<div><img src=".jpg">Some text</div>
<div><img src=".jpg">Some text</div>
<div><img src=".jpg">Some text</div>
</div>

I just found that it is possible to make a very simple slideshow by jQuery as

$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});

with

<div class="fadein">
<img src="http://farm3.static.flickr./2610/4148988872_990b6da667.jpg">
<img src="http://farm3.static.flickr./2597/4121218611_040cd7b3f2.jpg">
<img src="http://farm3.static.flickr./2531/4121218751_ac8bf49d5d.jpg">
</div>

I wonder how to modify this simple code to make a slide effect (fadeIn/fadeOut) for DIV instead of img. For example to make a slideshow of

<div class="fadein">
<div><img src="http://farm3.static.flickr./2610/4148988872_990b6da667.jpg">Some text</div>
<div><img src="http://farm3.static.flickr./2597/4121218611_040cd7b3f2.jpg">Some text</div>
<div><img src="http://farm3.static.flickr./2531/4121218751_ac8bf49d5d.jpg">Some text</div>
</div>

• javascript
• jquery
• slider
• slideshow

Share Improve this question Follow asked Nov 24, 2011 at 7:57 GooglebotGooglebot 15.7k4545 gold badges144144 silver badges247247 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

I wrote some code:

$(function(){
    $ds = $('.fadein div');
    $ds.hide().eq(0).show();
    setInterval(function(){
        $ds.filter(':visible').fadeOut(function(){
            var $div = $(this).next('div');
            if ( $div.length == 0 ) {
                $ds.eq(0).fadeIn();
            } else {
                $div.fadeIn();
            }
        });
    }, 3000);
});

Full example code you can find here : http://jsfiddle/h58ng/

I created a simple jQuery plugin:

DEMO - loop plugin

you just need to have a parent for your elements, and set the CSS of your elements to position:absolute;, and display:none;

The plugin:

(function($){jQuery.fn.loop = function(d,f){var e=this.children();var el=function(i){if(i==e.length)i=0;e.fadeTo(f,0).eq(i).fadeTo(f,1);setTimeout(function(){el(++i);},d);};el(0);};})(jQuery);

// How to use: $('yourElement').loop( delay , fadespeed );
// Ex: $('#myDiv').loop(2500, 400);

Try this

$(function(){
    $('.fadein div:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('div').fadeIn().end().appendTo('.fadein');}, 3000);
});

本文标签： javascriptA simple jQuery slideshow to work for DIVStack Overflow