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>