show images one by one using fadein and fadeout in jquery

Question

Today while creating a slider i stuck in the middle of code that how can i fadein and fadeout the image one by one in jquery. Code i tried so far:-

  <head>
  <style>
   #slideshow{
     list-style: none;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     padding: 0;
     margin: 0;
     position:fixed;
  }
  ul{
     list-style-type:none;
  }
 ul li{
     display:inline;
     width: 100%;
     height: 100%;
     position:absolute;
     background-size:cover;
     background-position:center center;
 }
 ul li img{
    display:none;
 }
 </style>
 </head>
<body>
<ul id="slideshow">
   <li><img src="img/1.jpg" /></li>
   <li><img src="img/2.jpg" /></li>
   <li><img src="img/3.jpg" /></li>
</ul>
<script>
    window.onload=init;
function init(){
items=$('ul').children('li');
i=0;
item=$(items[i]);
item.css('background-image','url('+ item.find('img').attr('src') +')').fadeOut(1000,function(){
    for(i=0;i<items.length;i++){
        item=$(items[i]);
        item.css('background-image','url('+ item.find('img').attr('src') +')');
    }
 });
}
</script>
</body>

After showing first image it automatically goes to last image without displaying the second image. Please help me to rectify this problem.

Johan Karlsson · Accepted Answer · 2014-10-23T19:05:08.667

Here's how you can do it: JSFiddle

function init(){
    $("#slideshow li").each(function(index){
       this.style.backgroundImage = "url('" + this.children[0].src + "')"; 
        if( index != 0)
           this.style.display = "none"; 
    });

    setTimeout(changeImage, 4000);
}

function changeImage(){
    $curr = $("#slideshow .active");
    $next = $("#slideshow .active").next();

    if($next[0] === undefined)
        $next = $("#slideshow li").eq(0);

    $curr.fadeOut(1000, function(){
        $next.fadeIn(1000, function(){
            $curr.removeClass("active");
            $next.addClass("active");
            setTimeout(changeImage, 4000);  //change image every 4 seconds
        });   
    });                 
}

$(document).ready(init);

score 0 · Answer 2 · answered Oct 23 '14 at 17:20

You need to use the setInterval() and something must tell you what is the current img. Assume that all image is hidden exept for the active one.

<ul id="slideshow">
   <li class="active"><img src="img/1.jpg" /></li>
   <li><img src="img/2.jpg" /></li>
   <li><img src="img/3.jpg" /></li>
</ul>

function ShowNext()
{
    var current = $("#slideshow .active");
    $(current).removeClass("active");
    $(current).fadeOut(1000, function () {
        $(current).next().fadeIn(1000);
        $(current).next().addClass("active");

    });

}

setInterval(function() {
    ShowNext(); 
}, 4000);

Code not tested but this is how you should do it. Also you need to do something when you reach the end of the slider but i'm sure you can handle that.

i tried your code but it didn't work. As you see in my code i make img src attribute as an li element background image. So i want to iterate over li element tag not on img tag. — Vipin, Oct 23 '14 at 17:42

jiy · Answer 3 · 2014-10-23T17:51:34.517

I'd suggest having a single element instead of 3.

Also, use a recursive function to swap the image every 2 seconds.

Lastly note the javascript has been moved inside the <head> element where it should be.

Update: This has been tested and works great - had to fix a few bugs - here's the updated code:

<html>
<head>
    <style><!-- Your Styles --></style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script language="javascript">

        var imgNum = 1;

        $(document).ready(function() {
            doSlideshow();
        });

        function doSlideshow() {
            $('#image1').fadeOut(400, function() {
                $('#image1').attr('src', 'img/' + imgNum + '.jpg');
                $('#image1').fadeIn(400);
                imgNum++;
                if (imgNum == 4) { imgNum = 1; }
                setTimeout('doSlideshow()', 2000);
            });
        }

    </script>
</head>
<body>
    <ul id="slideshow">
       <li><img id="image1" src="" /></li>
    </ul>
</body>
</html>

thanks man. As you see in my code i make img src attribute as an li element background image. So i want to iterate over li element tag not on img tag. — Vipin, Oct 23 '14 at 17:52
Probably for semantic markup purposes. It is essentially a list of images to be used. — Levi Beckman, Oct 23 '14 at 18:17

score 0 · Answer 4 · edited May 23 '17 at 12:20

There are definitely more than one way to do this.

I answered a similar question here:

>> Adding fade to simple slideshow with Javascript <<

However, to answer YOUR question directly, consider the following:

>> WORKING JS FIDDLE <<

// create arbitrary namespace
window.slideshow = {
    slides: null,
    currentSlide: null,
    nextSlide: null,
    interval: 3000,
    timer: null,
    init: function() {
        console.log('init slideshow');
        this.slides = $('#slideshow img');
        this.planNextSlide(1);
    },
    planNextSlide: function(timeoutInterval) {
        console.log('next slide (' + timeoutInterval + ')');
        this.timer = setTimeout(this.transitionSlide, timeoutInterval);
    },
    transitionSlide: function() {
        console.log('transition slide (' + (slideshow.currentSlide != null) + ')');
        if (slideshow.currentSlide != null) {
            // fade out old slide first
            slideshow.slides.eq(slideshow.currentSlide).fadeOut('fast', function() {
                slideshow.nextSlide = slideshow.currentSlide + 1;
                if (slideshow.nextSlide == slideshow.slides.size()) {
                    slideshow.nextSlide = 0;
                }
                slideshow.currentSlide = null;
                slideshow.transitionSlide();
            });
        }
        else {
            // fade in new slide
            slideshow.nextSlide = slideshow.nextSlide == null ? 0 : slideshow.nextSlide;
            slideshow.slides.eq(slideshow.nextSlide).fadeIn('fast', function() {
                slideshow.currentSlide = slideshow.nextSlide;
                slideshow.planNextSlide(slideshow.interval);
            });
        }
    }
};

// initial state initializer
slideshow.init();

show images one by one using fadein and fadeout in jquery

4 Answers4