js实现网页图片轮换播放

发布时间:2022-04-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了js实现网页图片轮换播放脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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

1、实现效果如下:

2、实现功能:

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

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

(3)图片的地址可以来自网络上,也可以是自己的服务器发送过来的字符串数组

3、实现代码:

(1)目录结构:

 

(2)index.htML的代码内容如下:

<!DOCTYPE html PubLIC "-//W3C//DTD XHTML 1.0 TransITional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html XMlns="http://www.w3.org/1999/xhtml">
<head>
 <;meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>图片轮换</title>
 <script type="text/javascript" src="js/showPic.js"></script>
 <link rel="stylesheet" type="text/css" href="css/mystyle.css"/>
</head>
<body>
    <img id="picture" src="image/1.jpg"alt="my image"/>
    <div id="navigate">
    <ul id="image">
          <li>
              <a href="#" title="左箭头" οnclick="clickTurnLeft();">
                 <img src="image/left_aim.jpg" id="leftAim">
              </a>
          </li>
   <li>
             <a href="image/1.jpg" title="鲜花" οnclick="showPic(this);return false;">
          <img src="image/1.jpg" id="smallPic" alt="花缩略图">
             </a>
   </li>
   <li>
             <a href="image/2.jpg" title="白雪" οnclick="showPic(this);return false;">
                <img src="image/2.jpg" id="smallPic"alt="雪缩略图">
             </a>
   </li>
   <li>
      <a href="image/3.jpg" title="飞鸟" οnclick="showPic(this);return false;">
                <img src="image/3.jpg" id="smallPic"alt="鸟缩略图">
             </a>
   </li>
   <li>
       <a href="image/4.jpg" title="岩石" οnclick="showPic(this);return false;">
          <img src="image/4.jpg" id="smallPic"alt="石头缩略图">
              </a>
   </li>
          <li>
             <a href="#" title="右箭头" οnclick="clickTurnRight();">
                <img src="image/right_aim.jpg" id="rightAim"alt="向右轮换">
             </a>
         </li> 
      </ul>
   </div>   
</body>
</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","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实现网页图片轮换播放全部内容,希望文章能够帮你解决js实现网页图片轮换播放所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: