快捷導(dǎo)航

js手動播放圖片實現(xiàn)圖片輪播效果

更新時間：2016年09月17日 16:33:37 作者：recoLuan

這篇文章主要為大家詳細(xì)介紹了js手動播放圖片實現(xiàn)圖片輪播效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

一、html代碼部分（et.thtml）：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link type="text/css" rel="stylesheet" href="css/styleet.css">
  <script type="text/javascript" src="js/system.js"></script>
</head>
<body>
  <div id="main">
    <div id="top">
      <span id="imgL" class="span1"></span>
      <img src="images/1.jpg" id="img" data-index="1" alt=""/>
      <span id="imgR" class="span2"></span>
    </div>
    <div id="bottom">
      <img src="images/1.jpg" id="img1" class="focusClass" data-index="1" alt=""/>
      <img src="images/2.jpg" id="img2" class="initClass" data-index="2" alt=""/>
      <img src="images/3.jpg" id="img3" class="initClass" data-index="3" alt=""/>
      <img src="images/4.jpg" id="img4" class="initClass" data-index="4" alt=""/>
      <img src="images/5.jpg" id="img5" class="initClass" data-index="5" alt=""/>
      <img src="images/6.jpg" id="img6" class="initClass" data-index="6" alt=""/>
      <img src="images/7.jpg" id="img7" class="initClass" data-index="7" alt=""/>
    </div>
  </div>
  <script type="text/javascript" src="js/et.js"></script>
</body>
</html>

二、css代碼部分（styleet,css）:

#main span{
  width: 22px;
  height: 38px;
  position: absolute;
  display: inline-block;
  cursor: pointer;
  background: url("../images/1.png") no-repeat 0 0;
}
.span1{
  background-position: 0 0;
  left:20px;
  top: 90px;
}
.span2{
  background-position: -22px 0;
  right: 20px;
  top: 90px;
}
#main{
  width: 500px;
  margin: 20px auto;
  text-align: center;
  border: solid 2px red;
  position: relative;
}
.initClass{
  width: 50px;
  border: solid 2px #fff;
  margin: 10px 5px;
}
.focusClass{
  width: 50px;
  border: solid 2px red;
  margin: 10px 5px;
}

三、js代碼部分（et.js）：

/**
 * Created by LuanReco on 2015/8/28.
 */
var slide={
  arrImg:new Array('images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg','images/7.jpg'),
  initClass:'initClass',
  focusClass:'focusClass',
  index:1,
  arrMax:7,
  imgMain:'img'
}
slide.top={
  //導(dǎo)航事件
  navEvent:function(){
    //上部分大圖片顯示累加后下標(biāo)對應(yīng)的圖片
    $$(slide.imgMain).src=slide.arrImg[slide.index-1];
    //根據(jù)焦點下標(biāo)值組合成導(dǎo)航圖片名稱
    var n='img'+slide.index;
    //執(zhí)行對應(yīng)導(dǎo)航圖片單擊事件
    $$(n).click();
  },
  //處理頁面上一部分的邏輯
  clickRight:function(){
    //點擊向右按鈕處理事件
    console.log(slide.index);

    //當(dāng)下標(biāo)小于或等于最大圖片數(shù)量時
    if(slide.index<slide.arrMax){
      //累加當(dāng)前下標(biāo)值
      slide.index++;
      slide.top.navEvent();
    }

  },
  clickLeft:function(){
    //點擊向右按鈕處理事件
    console.log(slide.index);

    //當(dāng)下標(biāo)小于或等于最大圖片數(shù)量時
    if(slide.index>1){
      //累加當(dāng)前下標(biāo)值
      slide.index--;
      slide.top.navEvent();
    }

  }
}
slide.bottom={
  initImgClass:function(){
    //初始化全部對不圖片的樣式
    for(var i=1;i<=slide.arrMax;i++){
      var n='img'+i;
      $$(n).className=slide.initClass;
    }
  },
  click:function(){
    //處理頁面下一部分的邏輯
    $$('imgL').onclick=function(){
      slide.top.clickLeft();
    }
    $$('imgR').onclick=function(){
      slide.top.clickRight();
    }
    //獲取所有底部的小圖片
    for(var i=1;i<=slide.arrMax;i++){
      //為每一張圖片綁定點擊事件
      var n='img'+i;
      $$(n).onclick=function(){
        //初始化全部樣式
        slide.bottom.initImgClass();
        //圖片元素本身獲取焦點樣式
        this.className=slide.focusClass;
        //在上部圖片中顯示點擊小圖片對應(yīng)的大圖片
        $$(slide.imgMain).src=slide.arrImg[this.getAttribute('data-index')-1];
        //重新記錄焦點圖片在數(shù)組中的對應(yīng)下標(biāo)位置
        slide.index=this.getAttribute('data-index');
      }
    }
  }
}
slide.autoplay={
  play:function(){
    var m=1;
    //for(var i=1;i<=slide.arrMax;i++){
      setInterval(function(){
        var n='img'+m;
        m++;
        $$(n).click();
        if(m>6)
          m=1;
      },1000)
    //}
  }
}

slide.autoplay.play();
slide.bottom.click();

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: