dns-daniel
9/21/2016 - 3:49 AM

Rotate Images on Home Page (jQuery)

Rotate Images on Home Page (jQuery)

rotateImages.js
content_copyfile_download
<script type="text/javascript">
    $(function() {
        // create the image rotator
        setInterval("rotateImages()", 3000);
    });

    function rotateImages() {
        var oCurPhoto = $('#hero div.current');
        var oNxtPhoto = oCurPhoto.next();
        if (oNxtPhoto.length == 0)
            oNxtPhoto = $('#hero div:first');

        oCurPhoto.removeClass('current').addClass('previous');
        oNxtPhoto.css({ opacity: 0.0 }).addClass('current')
                .animate({ opacity: 1.0 }, 1000,
                            function() {
                                oCurPhoto.removeClass('previous');
                            });
    }
</script>
<style>
    #hero div {
        position:absolute;
        z-index: 0;
    }
    #hero div.previous {
        z-index: 1;
    }
    #hero div.current {
        z-index: 2;
    }
</style>
</head>
<body>
	<div class="container">
		<div class="header"><img src="img/header.png"></div>
        <div id="hero">
            <div class="current"><img src="img/HomePageImages/Paris.jpg"></div>
            <div><img src="img/HomePageImages/Paris-2.jpg"></div>
            <div><img src="img/HomePageImages/Hong-Kong.jpg"></div>
            <div><img src="img/HomePageImages/Hong-Kong-2.jpg"></div>
            <div><img src="img/HomePageImages/London.jpg"></div>
            <div><img src="img/HomePageImages/London-2.jpg"></div>
            <div><img src="img/HomePageImages/San-Francisco.jpg"></div>
            <div><img src="img/HomePageImages/San-Francisco-2.jpg"></div>
        </div>