使用纯javascript的简单图像滑块

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用纯javascript的简单图像滑块相关的知识，希望对你有一定的参考价值。

  1. <html>
  2. <head>
  3.     <title>Sliding Images</title>
  4.     <script type="text/javascript">
  5.         //Create images Array
  6.         var imgArr = new Array("images/img1.jpg",
  7.                     "images/img2.jpg",
  8.                     "images/img3.jpg");
  9.  
  10.         var count = imgArr.length; // assign images array length
  11.         var position = 0; //position is set to zero
  12.  
  13.         function slidingImages() {
  14.             if ( document.images ) {
  15.                 if ( position < count ) {
  16.                     imageSrc(position); // call the image source
  17.                     position += 1;
  18.                 } else {
  19.                     position = 0;
  20.                     imageSrc(position);
  21.                 }
  22.             }
  23.             setTimeout(slidingImages, 3000);
  24.         }
  25.  
  26.         function imageSrc(position) {
  27.             document.banner.src = imgArr[position];
  28.         }
  29.     </script>
  30. </head>
  31. <body onload="slidingImages()">
  32.     <img src="images/img1.jpg" name="banner"/>
  33. </body>
  34. </html>

以上是关于使用纯javascript的简单图像滑块的主要内容，如果未能解决你的问题，请参考以下文章

css 纯CSS的图像滑块

在 Qualtrics 调查中，如何使用 JavaScript 动态设置滑块的范围？

如何在javascript中的活动图像滑块的左侧和右侧包含尖括号

如何使用javascript使工作图像滑块工作？

如何让用户使用纯 Javascript 将剪贴板中的图像数据粘贴到 Firefox 中的画布元素中？

我想创建一个基本的 Javascript 滑块