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.jsvar href = https://www.it610.com/article/new Array("image/1.jpg","image/2.jpg","image/3.jpg","image/4.jpg") ; 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); }
4、总结: 在JS文件里面定义了一个图片名称的数组,这个数组可以是服务器返回来的图片地址数据,也可以是网络上的图片地址。
【js实现网页图片轮换播放】以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。