Menu
Hey everyone, I am new to webdesign and I am trying to get this the Item Rotate Function to work but I am unable to get it to work. The images are all set and I believe I have the proper links to the css and javascript pages, but I could be wrong. Any suggestions???
Html:
<!DOCTYPE html>
<html>
<head>
<title>Running Website</title>
<link rel=”stylesheet” type=”text/css” href=”mystyles.css”>
<script src=”functions.js” type=”text/javascript”></script>
<script type=”text/javascript” src=”
<script type=”text/javascript” src=”js/infinite-rotator.js”></script>
</head>
<body bgcolor=”#000000″>
<div id=”container”>blah</div>
<ul id=”nav”>
<li>
<a href=”TrainSmart.html”>Home</a>
</li>
<li>
<a href=”#”>About</a>
</li>
<li>
<a href=”shoemain.html”>Shoes</a>
<ul>
<li><a href=”#”>Motion Control</a></li>
<li><a href=”#”>Neutral</a></li>
<li><a href=”#”>Stability</a></li>
</ul>
</li>
<li>
<a href=”#”>Injuries</a>
</li>
<li>
<a href=”#”>Links</a>
</li>
</ul>
<br>
<br>
<div id=”rotating-item-wrapper”>
<img class=”rotating-item” src=”myimages/neon1.jpg” alt=”neon marathon” width=”800px” height=”400px”>
<img class=”rotating-item” src=”myimages/snow1.jpg” alt=”Running in the Snow” width=”800px” height=”400px”>
<img class=”rotating-item” src=”myimages/silhouette1.jpg” alt=”Running Across a Sunset” width=”800px” height=”400px”>
<img class=”rotating-item” src=”myimages/photoshoot1.jpg” alt=”Photo Shoot” width=”800px” height=”400px”>
<img class=”rotating-item” src=”myimages/road1.jpg” alt=”Running Alone” width=”800px” height=”400px”>
</div>
</body>
</html>
Css:
#rotating-item-wrapper {
position: relative;
width: 800px;
height: 400px;
margin:auto;
}
.rotating-item {
display:list-item;
position: absolute;
top: 0;
left: 0;
}
Javascript:
$(window).load(function() { //start after HTML, images have loaded
var InfiniteRotator =
{
init: function()
{
//initial fade-in time (in milliseconds)
var initialFadeIn = 1000;
//interval between items (in milliseconds)
var itemInterval = 5000;
//cross-fade time (in milliseconds)
var fadeTime = 2500;
//count number of items
var numberOfItems = $(‘.rotating-item’).length;
//set current item
var currentItem = 0;
//show first item
$(‘.rotating-item’).eq(currentItem).fadeIn(initialFadeIn);
//loop through the items
var infiniteLoop = setInterval(function(){
$(‘.rotating-item’).eq(currentItem).fadeOut(fadeTime);
if(currentItem == numberOfItems -1){
currentItem = 0;
}else{
currentItem++;
}
$(‘.rotating-item’).eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
};
InfiniteRotator.init();
});