slider

by sanat gupta

HTML

<button id="start">
start
</button>
<button id="stop">
stop
</button>
<br>
<br>

<img id="image" src="https://www.w3schools.com/css/img_fjords.jpg" style="width:300px">

JavaScript

var myVar = '';
    $(function(){
    	$("#start").on('click',function(){
       var imageSources = ["https://www.w3schools.com/css/img_fjords.jpg", "https://www.w3schools.com/howto/img_mountains.jpg"]


      var index = 0;
     myVar = setInterval(function(){
        if (index === imageSources.length) {
          index = 0;
        }
        document.getElementById("image").src = imageSources[index];
        index++;
      }, 2000);
     
      });
      
      $("#stop").on('click',function(){
      	 clearInterval(myVar);
      });
      
    });