Hey everybody, I’m in the process of making my first ever website. I’m only playing around with things at the moment, and I am trying to add an automatic slide show to the page. I have followed a tutorial and for some reason, the images aren’t changing. I have tried to read up on Google and cannot see where I am going wrong. If any is able to help, I would be very grateful.
Here is the code I have so far:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/slideshow.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<title>CSS Test</title>
</head>
<body onload="changeImage();">
<div id="wrapper">
<div id="headwrapper">
<div id="logodisplay">
</div><!--end logodisplay-->
<div id="address">
<p>32-34 Chapelgate<br>Retford<br>DN22 6PJ<br>01777 860111<br></p>
</div> <!--end address -->
<div id="socialnetworking">
<img src="images/facebook.png">
<img src="images/google.png">
<img src="images/rss.png">
<img src="images/twitter.png">
<img src="images/email.png">
</div><!--end socialnetworking-->
<div class="navbar">
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>WHATS ON</li>
<li>GALLERY</li>
<li>CONTACT US</li>
</ul>
</div><!--end navbar -->
</div><!--end headwrapper-->
<div id ="slideshow_container">
<div id="counter">
3
</div> <!-- end counter -->
<div class="behind">
<img src="images/image1.jpg" alt="IMAGE">
</div> <!--end behind -->
<div class="infront">
<img src="images/image1.jpg" alt="IMAGE">
</div> <!--end infront -->
</div><!-- end slideshow_container -->
</div> <!--end wrapper -->
</body>
</html>
CSS
body {
background-color: #EEE9E9;
padding: 0;
margin: 0;
}
#wrapper {
width: 78%;
height: 900px;
display: block;
margin: 0px auto;
background-color: #EDEDED;
}
#headwrapper {
width: 100%;
height: 180px;
display: block;
margin: 0px auto;
position: relative;
background-color: white;
}
.navbar {
display: block;
height: 30px;
width: 100%;
position: absolute;
bottom: 0;
background-color: #CDC9C9;
}
.navbar ul li {
position: relative;
bottom: 10px;
display: block;
float: left;
margin-right: 5px;
width: 180px;
color: #FFFFFF;
}
#logodisplay {
display: block;
height: 80%;
width: 45%;
float: left;
background-image: url("images/xoxo.png");
background-repeat: no-repeat;
margin: 25px;
padding: 0;
margin: 5px;
}
#address p {
display: block;
float: right;
position: absolute;
right: 0;
height: 20%;
width: 20%;
color: #CDC9C9;
font-size: 12pt;
font-family: Georgia,Utopia,'Palatino Linotype',serif;
letter-spacing: 1px;
line-height: 17px;
}
.email {
color: blue;
}
#socialnetworking {
display: block;
float: right;
position: absolute;
right: 0;
top: 100px;
height: 20%;
width: 20%;
}
#socialnetworking img {
height: 16px;
width: 16px;
display: block;
float: left;
padding-right: 4px;
}
#slideshow_container {
width: 900px;
height: 500px;
margin: 10px auto;
overflow: hidden;
}
#slideshow_container div {
width: 900px;
height: 500px;
position: absolute;
}
JAVASCRIPT SLIDESHOW
// Javascript Document
function changeImage () {
var imagesInShow ="3";
var currentImage = $ ("#counter").html();
currentImage = parseInt ( currentImage );
if (currentImage == imagesInShow) {
var nextImage = 1;
}
else
{
var nextImage = currentImage + 1;
}
var currentSrc = $(".infront img").attr("src");
var nextSrc = "images/image" + nextImage + ".jpg";
$ (".behind img").attr("src" , currentSrc);
$ (".infront").css("display" , "none");
$(".infront img").attr("src" , nextSrc);
$(".infront").fadeIn(700);
$("#counter").html( nextImage);
// !!!IMPORTANT!!!
setTimeout('changeImage'()',5000);
}
#(document).ready( function() ;
JAVESCRIPT JQUERY
This can be found here as it’s pretty long!
Cheers
