Download to read offline
![}
button{
background-color: black;
}
</style>
<title></title>
</head>
<body>
<div>
<img src="images/img1.jpg " id="image">
<button class="prev" onclick="prev()"><</button>
<button class="next" onclick="next()">></button>
<div style="text-align:center">
</div>
</div>
<script type="text/javascript">
var img_array=['img1.jpg','img2.png','img3.jpg','img4.jpg'];
var array_length=img_array.length;
var i=0;
var set=setInterval(slider,8000);
//here slider is afunction
//8000 is a 8 sec time
function slider(){
i++;
i=i%array_length;](https://image.slidesharecdn.com/imageslider-181213140215/85/Imageslider-2-320.jpg)
![//it is done to block i variable value exceed more than 3 while acessing in array
//when i becomes 4 while increasing and it will be like i=4%4 and the remainder
is zero so image is acessed from again 0
document.getElementById('image').src="images/"+img_array[i];
}
function next(){
i++;
i=i%array_length;
document.getElementById('image').src="images/"+img_array[i];
}
function prev(){
i--;
if(i<0){
i=array_length-1;
//when i becomes zero then it will execute like i=4-1 is equql to 3
}
document.getElementById('image').src="images/"+img_array[i];
}
</script>
</body>
</html>](https://image.slidesharecdn.com/imageslider-181213140215/85/Imageslider-3-320.jpg)
Imageslider
- 1. <!DOCTYPE html> <html> <head> <style type="text/css"> div{ height:500px; width:700px; margin:auto; position:relative; } img{ height:100%; width:100%; } .prev{ position:absolute; top:50%; left:0; font-size: 30px; color:white; } .next{ position: absolute; top:50%; right:0; font-size: 30px; color:white;
- 2. } button{ background-color: black; } </style> <title></title> </head> <body> <div> <img src="images/img1.jpg" id="image"> <button class="prev" onclick="prev()"><</button> <button class="next" onclick="next()">></button> <div style="text-align:center"> </div> </div> <script type="text/javascript"> var img_array=['img1.jpg','img2.png','img3.jpg','img4.jpg']; var array_length=img_array.length; var i=0; var set=setInterval(slider,8000); //here slider is afunction //8000 is a 8 sec time function slider(){ i++; i=i%array_length;
- 3. //it is doneto block i variable value exceed more than 3 while acessing in array //when i becomes 4 while increasing and it will be like i=4%4 and the remainder is zero so image is acessed from again 0 document.getElementById('image').src="images/"+img_array[i]; } function next(){ i++; i=i%array_length; document.getElementById('image').src="images/"+img_array[i]; } function prev(){ i--; if(i<0){ i=array_length-1; //when i becomes zero then it will execute like i=4-1 is equql to 3 } document.getElementById('image').src="images/"+img_array[i]; } </script> </body> </html>