I am working on a slideshow for a website but I cannot figure out the Javascript. I need to make a .jpg slideshow instead of a flash movie for acessability reasons.
http://www.disability.gov has recently redone their website and have almost exactly what I am trying to accomplish on the homepage.
This is what I have for the code:
<div id="slideshow">
<span id="pics">
<h1><img src="images/slideshow/image1.jpg" height="380" width="540" alt="Training and Technical Resource Center." /></h1>
</span>
<a href="/[~12~]"><img src="images/check_it_out.gif" alt="Check it out" /></a>
</div>
<script type="text/javascript">
if(pageStyle.getPageStyle() == 'Default') {
var imageTemplate = '<img src="$1" height="340" width="510" alt="" />'
var images = ['/images/slideshow/image1.jpg','/images/slideshow/image2.jpg','/images/slideshow/image3.jpg','/images/slideshow/image4.jpg','/images/slideshow/image5.jpg','/images/slideshow/image6.jpg','/images/slideshow/image7.jpg'];
var imageSrc = "";
for (var i=1; i < images.length; i++) {
imageSrc += imageTemplate.replace('$1', images[i]);
}
$('#pics').append(imageSrc);
$('#pics').cycle({timeout: 7000, autostop: 1, autostopCount: images.length+1});
}
</script>