We can make a simple Image Slider in JavaScript.
Just Create a simple HTML page using this code and view the result.
<html>
<head>
<title>Simple Slide</title>
</head>
<script language="javascript">
// make a array of images and pass the location of every image.
var myPix = new Array("images/1.jpg", "images/2.jpg", "images/3.jpg");
var thisPic = 0;
function goPrevious() {
if (document.images && thisPic > 0) {
thisPic--;
document.myPicture.src = myPix[thisPic];
}
}
function goNext() {
if (document.images && thisPic < 2) {
thisPic++;
document.myPicture.src = myPix[thisPic];
}
}
</script>
<body>
<img src="images/0.jpg" name="myPicture"><br>
<a href="javascript:goPrevious()">Previous</a>
<a href="javascript:goNext()">Next</a>
<body>
</html>
When you test it in your browser yow will see something like this:
Just Create a simple HTML page using this code and view the result.
<html>
<head>
<title>Simple Slide</title>
</head>
<script language="javascript">
// make a array of images and pass the location of every image.
var myPix = new Array("images/1.jpg", "images/2.jpg", "images/3.jpg");
var thisPic = 0;
function goPrevious() {
if (document.images && thisPic > 0) {
thisPic--;
document.myPicture.src = myPix[thisPic];
}
}
function goNext() {
if (document.images && thisPic < 2) {
thisPic++;
document.myPicture.src = myPix[thisPic];
}
}
</script>
<body>
<img src="images/0.jpg" name="myPicture"><br>
<a href="javascript:goPrevious()">Previous</a>
<a href="javascript:goNext()">Next</a>
<body>
</html>
When you test it in your browser yow will see something like this:
No comments:
Post a Comment