js實現(xiàn)網(wǎng)頁圖片輪換播放

更新時間：2021年09月08日 08:33:24 作者：SQ_Bang

這篇文章主要為大家詳細介紹了js實現(xiàn)網(wǎng)頁圖片輪換播放，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)網(wǎng)頁圖片輪換播放的具體代碼，供大家參考，具體內(nèi)容如下

1、實現(xiàn)效果如下：

2、實現(xiàn)功能：

（1）點擊左右箭頭之后，下面顯示的圖片會換成對應(yīng)的上一張或下一張圖片

（2）點擊導(dǎo)航的某一張圖片時，下面的就會顯示對應(yīng)的圖片，而且再次點擊上一張或者下一張時會顯示對應(yīng)的圖片

（3）圖片的地址可以來自網(wǎng)絡(luò)上，也可以是自己的服務(wù)器發(fā)送過來的字符串?dāng)?shù)組。

3、實現(xiàn)代碼：

（1）目錄結(jié)構(gòu)：

（2）index.html的代碼內(nèi)容如下：

<!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的代碼內(nèi)容如下：

/* 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的代碼內(nèi)容如下：

//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);
}