Skip to content

Instantly share code, notes, and snippets.

@matharchod

matharchod/slideshow.html

Created January 13, 2012 00:08
Show Gist options
  • Save matharchod/1603931 to your computer and use it in GitHub Desktop.
Save matharchod/1603931 to your computer and use it in GitHub Desktop.
Download ZIP
slideshow
Raw
slideshow.html
<html>
<head>
<title>Gallery Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
slides = [
"images/plug2-offline-icon.jpg",
"images/notsign-offline-icon.jpg",
"images/globe-offline-icon.jpg",
"images/computers-offline-icon.jpg",
"images/computers3-offline-icon.jpg",
"images/cloud-offline-icon.jpg"
];
var num = 0;
var ImgLength = slides.length - 1;
var lock = false;
var run;
function chgImg(direction) {
if (document.images) {
num = num + direction;
if (num > ImgLength) {
num = 0;
}
if (num < 0) {
num = ImgLength;
}
//slides[num] = string for image link
document.slideshow.src = slides[num];
return console.log(slides[num]);
}
}
function auto(delay) {
var delay = delay;
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
}
}
//DOC READY
$(function(){
$('#forward').click( function() {
chgImg(1);
});
$('#back').click( function() {
chgImg(-1);
});
$('#auto').click( function() {
auto(300);
});
});
</script>
</head>
<body>
<img src="images/cloud-offline-icon.jpg" name="slideshow">
<table>
<tr>
<td align="right"><a href="#" id="back">Previous</a></td>
<td align="center"><a href="#" id="auto">Auto/Stop</a></td>
<td align="left"><a href="#" id="forward">Next</a></td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment