JS Slide Show

Tutorial kali ini membuat Menu Slide Show gambar dengan penggunaan Javascript

Step 1. HTML

source code pada html

index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slide Show</title>
<script src="script.js"></script>
</head>
<body>
<img src="img/1.jpg" alt="" width="200" height="200" name="img" id="img" />
<p>
<input type="button" value="Prev" onclick="prevImg()" />
<input type="button" value="Random" onclick="randomImg()" />
<input type="button" value="AutoPlay" onclick="playImg()" />
<input type="button" value="Pause" onclick="stopImg()" />
<input type="button" value="Next" onclick="nextImg()" />
</p>
</body>
</html>

Step 2. JS

Javascript untuk perintah slide show

script.js

var currentImg;
var interval;
currentImg = 1;
function nextImg()
{
 if(currentImg>=6)
 {
 currentImg = 0;
 } 
 currentImg++;
 document["img"].src = "img/"+currentImg+".jpg";
}
function prevImg()
{
 if(currentImg<=0)
 {
 currentImg = 6;
 } 
 currentImg--;
 document["img"].src = "img/"+currentImg+".jpg";
}
function randomImg()
{
 var selectedImg;
 selectedImg = Math.floor(1 + Math.random()*6);
 document["img"].src = "img/"+selectedImg+".jpg";
 currentImg = selectedImg;
}
function playImg()
{
 nextImg();
 interval=setTimeout(playImg,1000);
}
function stopImg()
{
 clearTimeout(interval);
}

Ok, download contoh file ini dan selamat berkoding !

Leave a comment