JQUERY slideshow code condense

Question

I have just started using the JQuery library and so far I have enjoyed it a lot. I am here asking if there is a way to condense the code below. At first glance it looks like a lot of copy/paste but this was the only way I could really think about doing this. Information about what I am trying to accomplish: A 3 image slideshow without controls. The code works perfectly fine but I am sure there is a better way to go about it.

http://recordit.co/lTHpE25ukQ

setInterval(function(e){
    image += 1

    if(image == 4) {
        image = 1
    }

    if( image == 1) {
        $('.image1').addClass('active');
        $('.image2').removeClass('active');
        $('.image3').removeClass('active');
        $('.image4').removeClass('active');
    }

    if( image == 2) {
        $('.image1').removeClass('active');
        $('.image2').addClass('active');
        $('.image3').removeClass('active');
        $('.image4').removeClass('active');
    }

    if( image == 3) {
        $('.image1').removeClass('active');
        $('.image2').removeClass('active');
        $('.image3').addClass('active');
        $('.image4').removeClass('active');
    }
}, 10000);

This is my first post on Stack Overflow so please give me feedback.

Answer 1

You can add a common class (say 'image') to all the elements. Right before if statements, you can call

$('.image').removeClass('active');

and inside each if statements you can call,

$('.imageN').addClass('N');    // N being the number

also i'm unable to open the link.. :(

Edit ---- In a bit more risky approach, you can do the following.

$("img[class*='image']").removeClass('active');   // selects elements with class name starting with 'image'
var imgClass = '.image' + image;
$(imgClass).addClass('active');

Here we concact '.image' with the image number to get the class name. You have to follow this class naming format to get this working.

Answer 2

setInterval(function(e)
{
    image += 1;
    if(image == 5){
        image = 1
    }
    $('.active').removeClass('active');
    $('.image'+image).addClass('active');

}, 10000);

Answer 3

You can use switch statement and then at beginning remove active class from all the html img tag [assuming that there are only image tags for this purpose in the page and if not give one more common class for all the images and replace $(img).removeClass line with the classname ] and based on the case assign active class for only required image.

setInterval(function(e){
    image += 1
    if(image == 4) {
        image = 1
    }
    $(img).removeClass('active'); //Remove active class from all the images
    switch(image)
    {   
        case 1:$('.image1').addClass('active');
               break;
        case 2:$('.image2').addClass('active');
               break;
        case 3:$('.image3').addClass('active');
               break;
        default:image=1; 
                break;
    }
}, 10000);

Answer 4

Just throwing this option out there as well. You can always take advantage of jQuery's next() and first() methods to move through the IMG elements in the DOM tree. To make it loop you can check to see if anything is returned for the next IMG element, if not then :first will tell it to move back to the first IMG element in the tree.

 $(document).ready(function() { setInterval(function() { var $active = $('#slideshow img.active'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $next.addClass('active'); $active.removeClass('active'); }, 3000); }); 

 #slideshow { position: relative; height: 600px; } #slideshow img { position: absolute; top: 0; left: 0; z-index: 8; } #slideshow img.active { z-index: 10; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="slideshow"> <img src="http://dummyimage.com/600x400/000/fff&text=Test+1" alt="" class="active" /> <img src="http://dummyimage.com/600x400/000/fff&text=Test+2" alt="" /> <img src="http://dummyimage.com/600x400/000/fff&text=Test+3" alt="" /> </div>