Rotate Images on Home Page (jQuery)
<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>