JamesSmith75
12-15-2010, 10:41 PM
Been given a task to edit a simple javascript slide show to have form buttons
This what i have so far.. I have the next and back buttons working but i have no idea where to begin with play and stop. It should basically repeatedtly cycle.
<script type="text/javascript">
var hol_pics = new Array(); // Create Array Object
for (var i=0;i<9;i=i+1) {
hol_pics[i]=new Image(); // Make 0 -> 8 array elements into Image Objects
hol_pics[i].src="harbour"+i+".jpg"; // Preload Images
}
i=0; // 'Remember' original image displayed by img tag
function next_photo() {
i=i+1;
if(i>8) i=0; // Increment image index but keep in range 0 - 8
// above 2 lines can be replaced by alternative code: i=(i+1)%9;
document.images[0].src = hol_pics[i].src; // Display next image
}
function back_photo() {
i=i-1;
if(i<0) i=8; // Decrement image index but keep in range 0 - 8
// above 2 lines can be replaced by alternative code: i=(i-1+9)%9;
document.images[0].src = hol_pics[i].src; // Display next image
}
//]]>
</script>
</head>
<body>
<h1>Basic Slide Show</h1>
<p>
<img src="harbour0.jpg" width="324" height="432" alt=></a>
<form action="">
<input type="button" value="Previous" name="button" onclick="back_photo()" />
<input type="button" value="Next" name="button" onclick="next_photo()" />
</form>
This what i have so far.. I have the next and back buttons working but i have no idea where to begin with play and stop. It should basically repeatedtly cycle.
<script type="text/javascript">
var hol_pics = new Array(); // Create Array Object
for (var i=0;i<9;i=i+1) {
hol_pics[i]=new Image(); // Make 0 -> 8 array elements into Image Objects
hol_pics[i].src="harbour"+i+".jpg"; // Preload Images
}
i=0; // 'Remember' original image displayed by img tag
function next_photo() {
i=i+1;
if(i>8) i=0; // Increment image index but keep in range 0 - 8
// above 2 lines can be replaced by alternative code: i=(i+1)%9;
document.images[0].src = hol_pics[i].src; // Display next image
}
function back_photo() {
i=i-1;
if(i<0) i=8; // Decrement image index but keep in range 0 - 8
// above 2 lines can be replaced by alternative code: i=(i-1+9)%9;
document.images[0].src = hol_pics[i].src; // Display next image
}
//]]>
</script>
</head>
<body>
<h1>Basic Slide Show</h1>
<p>
<img src="harbour0.jpg" width="324" height="432" alt=></a>
<form action="">
<input type="button" value="Previous" name="button" onclick="back_photo()" />
<input type="button" value="Next" name="button" onclick="next_photo()" />
</form>