Home » Create Simple Static slideshow or slider using Jquery » Jquery » Create Simple Static slideshow or slider using Jquery

Create Simple Static slideshow or slider using Jquery

Create Simple Static slideshow or slider using Jquery

<style>
div#home-background-slideshow{
    position: relative;
    height: 745px;
    width: 1440px;
    position: absolute;
    top: 143px;
    right: -10px;
}

img.slides{
    position: absolute;
    width: 100%;
    top: 0px;
    right: 0px;
    height: 745px;
}

img#home-image{
    z-index: -666;
}

img#shop-image{
    z-index: -777;
}

img#cart-image{
    z-index: -888;
}

img#shoes-image{
    z-index: -999;
}

</style>

<script type="text/javascript">
$(document).ready(function (){
    var indexer = 0;
        var animateInterval;

function animate(){
        if(indexer == 0){
            $("#home-background-slideshow > #watch-image").fadeOut(2500);
            $("#home-background-slideshow > #home-image").fadeIn(2500);
        }
        else if(indexer == 1){
            $("#home-background-slideshow > #home-image").fadeOut(2500);
            $("#home-background-slideshow > #shop-image").fadeIn(2500);
        }
        else if(indexer == 2){
            $("#home-background-slideshow > #shop-image").fadeOut(2500);
            $("#home-background-slideshow > #cart-image").fadeIn(2500);
        }
        else if(indexer == 3){
            $("#home-background-slideshow > #cart-image").fadeOut(2500);
            $("#home-background-slideshow > #shoes-image").fadeIn(2500);
        }

        if(indexer == 3) indexer = 0;
        else indexer++;
    }

    animateInterval = setInterval(animate, 10000);
    animate();


});
</script>

<style>
div#home-background-slideshow{
    position: relative;
    height: 745px;
    width: 1440px;
    position: absolute;
    top: 143px;
    right: -10px;
}

img.slides{
    position: absolute;
    width: 100%;
    top: 0px;
    right: 0px;
    height: 745px;
}

img#home-image{
    z-index: -666;
}

img#shop-image{
    z-index: -777;
}

img#cart-image{
    z-index: -888;
}

img#shoes-image{
    z-index: -999;
}

</style>

<div id="home-background-slideshow">
    <img id="home-image" class="slides" src="img/ac_7.jpg" />
    <img id="shop-image" class="slides" src="img/abstract_62.jpg" />
    <img id="cart-image" class="slides" src="img/abstract_54.jpg" />
    <img id="shoes-image" class="slides" src="img/abstract_62.jpg" />
</div>

0 komentar:

Post a Comment

Create Simple Static slideshow or slider using Jquery