Labels

php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Sunday, July 8, 2018

Automatic Image Slider Using Javascript

<!DOCTYPE html><html>
<title>Automatic Slider Using Javascript</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style> .mySlides {display:none;} </style>
<body>
<h2 class="w3-center">Automatic Slideshow</h2> <div class="w3-content w3-section" style="max-width:500px"> <img class="mySlides" src="C:\Users\csuser\Desktop\ssss\images\download.jpg"
style="width:100%"> <img class="mySlides" src="C:\Users\csuser\Desktop\ssss\images\images.jpg"
style="width:100%"> <img class="mySlides" src="C:\Users\csuser\Desktop\ssss\images\shanghai.jpg"
style="width:100%"> </div> <script> var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carousel, 2000); // Change image every 2 seconds } </script> </body> </html>
Result:







1 comment:

  1. Hey, I am Mary P. Cearley Thanks for sharing the info. keep up the good work going…. I really enjoyed exploring your site. If you have any query with Norton then you call your Norton support number +18555583999.

    ReplyDelete

More Posts

FOLLOW