| 标题 | 基于javascript数组实现图片轮播 |
| 范文 | 这篇文章主要介绍了基于javascript数组实现图片轮播的相关资料,感兴趣的朋友可以参考下 图片轮播的办法有多种，在这里介绍一种简单的：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" /> </div> </body> </html> 以上就是本文的全部内容，希望对大家的学习有所帮助。 |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。