图片轮播的办法有多种,在这里介绍一种简单的:js数组实现。
首先将图片路径存储在数组中,然后再调用setInterval函数来依次轮播图片
<script type="text/javascript"> var curIndex = 0; var timeInterval = 1000; var arr = new Array(); arr[0] = "1.png"; arr[1] = "2.png"; arr[2] = "3.png"; arr[3] = "4.png"; arr[4] = "5.png"; setInterval(changeImg,timeInterval); function changeImg() { var obj = document.getElementById("imge"); if (curIndex == arr.length-1) { curIndex = 0; } else { curIndex += 1; } obj.src = arr[curIndex]; } </script>
完整实例如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用数组实现图片自动轮播</title> <style type="text/css"> #main{ width: 700px; height: 450px; margin: 0 auto; text-align: center; } </style> <script type="text/javascript"> var curIndex = 0; var timeInterval = 1000; var arr = new Array(); arr[0] = "1.png"; arr[1] = "2.png"; arr[2] = "3.png"; arr[3] = "4.png"; arr[4] = "5.png"; setInterval(changeImg,timeInterval); function changeImg() { var obj = document.getElementById("imge"); if (curIndex == arr.length-1) { curIndex = 0; } else { curIndex += 1; } obj.src = arr[curIndex]; } </script> </head> <body> <div id="main"> <h1>使用数组实现图片自动轮播</h1> <img id = "imge" src = "1.png" alt="picture" /> </div> </body> </html>
精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播
以上就是本文的全部内容,希望对大家的学习有所帮助。
Immutable 在 JavaScript 中的应用
Mutable对象在JavaScript中,对象是引用类型的数据,其优点在于频繁的修改对象时都是在原对象的基础上修改,并不需要重新创建,这样可以有效的利用内
搞定immutable.js详细说明
什么是ImmutableDataImmutableData是指一旦被创造后,就不可以被改变的数据。通过使用ImmutableData,可以让我们更容易的去处理缓存、回退、数据变化检测等
JS基于clipBoard.js插件实现剪切、复制、粘贴
摘要:最近做了一个项目,其中有这样一需求:实现一个点击按钮复制链接的功能,通过网上找相关资料,找到了几个插件,ZeroClipboard是通过flash实现