js实现网页图片轮换播放

这篇文章主要为大家详细介绍了js实现网页图片轮换播放，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现网页图片轮换播放的具体代码，供大家参考，具体内容如下

1、实现效果如下：

2、实现功能：

（1）点击左右箭头之后，下面显示的图片会换成对应的上一张或下一张图片

（2）点击导航的某一张图片时，下面的就会显示对应的图片，而且再次点击上一张或者下一张时会显示对应的图片

（3）图片的地址可以来自网络上，也可以是自己的服务器发送过来的字符串数组。

3、实现代码：

（1）目录结构：

（2）index.html的代码内容如下：

   图片轮换

（3）mystyle.css的代码内容如下：

 /* mystyle.css 代码*/ body { text-align:center } #navigate{ margin:0 auto; width:1100px; height:100px; } ul{ margin-right:auto;margin-left:auto; } li{ float:left; padding:10px; list-style:none; } #leftAim{ width:100px; height:100px; } #smallPic{ width:180px; height:120px; border:2px solid black; } #rightAim{ width:100px; height:100px; } #picture{ display:block; width:800px; height:600px; margin:0 auto; }

（4）showPic.js的代码内容如下：

 //showPic.js var href = new Array("image/1.jpg-600","image/2.jpg-600","image/3.jpg-600","image/4.jpg-600") ; var index = 0 ; function clickTurnLeft() { if (index == 0) { index = href.length - 1 ; } else { index = --index % href.length ; } var picture = document.getElementById("picture"); picture.setAttribute("src",href[index]); } function clickTurnRight(){ index = ++index % href.length ; var picture = document.getElementById("picture"); picture.setAttribute("src",href[index]); } function showPic(whichPic){ var source = whichPic.getAttribute("href"); index = href.indexOf(source); var picture = document.getElementById("picture"); picture.setAttribute("src",source); }