CODEWITHSUNDEEP
javascriptjquery
user2382538
user2382538

Reputation: 25

Basic 2 image slideshow in Jquery

I'm trying to create a basic jquery 2 image slideshow. I don't want the images to fade into eachother, they should just simply change every second. In the jquery code I have below, the code includes fading. What would be the correct code without fading?

<div id="manwrapper">
    <div>
        <img src="images/index-man.png" width="500" height="788" alt="SS Image" />
    </div>
    <div>
        <img src="images/index-man2.png" width="500" height="788" alt="SS Image" />
    </div>
</div>
<!--end manwrapper-->

CSS

#container #manwrapper {
    float: right;
    margin-top: -280px;
    z-index: 3;
    position:relative;
    width:500px;
    height:788px;
}
#container #manwrapper > div {
    position:absolute;
}

JavaScript

setInterval(function () {
    $('#manwrapper > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#manwrapper');
}, 3000);

Upvotes: 1

Views: 63

Answers (2)

Derek Henderson
Derek Henderson

Reputation: 9706

Remove 'fadeOut(1000) and .fadeIn(1000).

Demo

Upvotes: 1

rahul maindargi
rahul maindargi

Reputation: 5625

Try this...

setInterval(function() { 
  $('#manwrapper > div:first')
    .hide(1000)
    .next()
    .show(1000)
    .end()
    .appendTo('#manwrapper');
},  3000);

Upvotes: 2

Related Questions