自動播放的onClick - 的JavaScript滑塊

Question

我在下面的網站添加圖像的自動播放在一個簡單的滑塊在Javascript：

http://rastastation.com/rastaradio.html

的特色照片就移動到前面的圖像和下一個圖像onClick事件。不過，我需要添加一個按鈕來自動播放滑塊中的圖像。我需要幫助。

我研究過它，可以看到您可以使用與startTimer（）函數關聯的自定義函數。但是，我不太瞭解如何整合其他參考帖子中顯示的語法。

是否有一個簡單的解決方案來將onClick處理程序添加到名爲displayAutoplay（）的函數中。

請提供反饋和解決方案。

</script> 

    <script type = "text/javascript"> 
     function displayImage(image) { 
      document.getElementById("img").src = image; 
     } 

     function displayNextImage() { 
      x = (x == images.length - 1) ? 0 : x + 1; 

     clearInterval(timer); 
     displayImage(images[x]); 
     timer = setInterval(displayThisImage, 5000); 
     } 

     function displayThisImage() { 
      x = (x == images.length - 1) ? 0 : x + 1; 
      displayImage(images[x]); 
     } 

     function displayPreviousImage() { 
      x = (x <= 0) ? images.length - 1 : x - 1; 
     clearInterval(timer); 
     displayImage(images[x]); 
     timer = setInterval(displayThisImage, 5000); 
     } 

     function startTimer() { 
     timer = setInterval(displayThisImage, 5000); 
     } 


     var images = [], x = -1; 
     var timer ; 
     images[0] = "http://rastastation.com/images/carousel_anthonyb2.png"; 
     images[1] = "http://rastastation.com/images/carousel_capleton2.png"; 
     images[2] = "http://rastastation.com/images/carousel_sizzla2.png"; 
     images[3] = "http://rastastation.com/images/carousel_earlsixteen.png"; 
     images[4] = "http://rastastation.com/images/carousel_norrisreid.png"; 
     images[5] = "http://rastastation.com/images/carousel_yamibolo2.png"; 
     images[6] = "http://rastastation.com/images/carousel_fantanmojah2.png"; 
     images[7] = "http://rastastation.com/images/carousel_natural_black2.png"; 
     images[8] = "http://rastastation.com/images/carousel_admiraltibet.png"; 
     images[9] = "http://rastastation.com/images/carousel_luciano.png"; 
    </script> 

</head> 

HTML

謝謝...威廉

Answer 1

這是否看起來像一個很好的解決方案？還是有更好的解決方案？

</script> 

    <script type = "text/javascript"> 
     function displayImage(image) { 
      document.getElementById("img").src = image; 
     } 

     function displayNextImage() { 
      x = (x == images.length - 1) ? 0 : x + 1; 

     clearInterval(timer); 
     displayImage(images[x]); 
     timer = setInterval(displayThisImage, 5000); 
     } 

     function displayThisImage() { 
      x = (x == images.length - 1) ? 0 : x + 1; 
      displayImage(images[x]); 
     } 

     function displayPreviousImage() { 
      x = (x <= 0) ? images.length - 1 : x - 1; 
     clearInterval(timer); 
     displayImage(images[x]); 
     timer = setInterval(displayThisImage, 5000); 
     } 

     function startTimer() { 
     timer = setInterval(displayThisImage, 5000); 
     } 


     var images = [], x = -1; 
     var timer ; 
     images[0] = "http://rastastation.com/images/carousel_anthonyb2.png"; 
     images[1] = "http://rastastation.com/images/carousel_capleton2.png"; 
     images[2] = "http://rastastation.com/images/carousel_sizzla2.png"; 
     images[3] = "http://rastastation.com/images/carousel_earlsixteen.png"; 
     images[4] = "http://rastastation.com/images/carousel_norrisreid.png"; 
     images[5] = "http://rastastation.com/images/carousel_yamibolo2.png"; 
     images[6] = "http://rastastation.com/images/carousel_fantanmojah2.png"; 
     images[7] = "http://rastastation.com/images/carousel_natural_black2.png"; 
     images[8] = "http://rastastation.com/images/carousel_admiraltibet.png"; 
     images[9] = "http://rastastation.com/images/carousel_luciano.png"; 
    </script>