js手动播放图片实现图片轮播效果

2019-11-20 08:58:08

字体：大中小

来源：转载

供稿：网友

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

一、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={  //导航事件  navEvent:function(){    //上部分大图片显示累加后下标对应的图片    $$(slide.imgMain).src=slide.arrImg[slide.index-1];    //根据焦点下标值组合成导航图片名称    var n='img'+slide.index;    //执行对应导航图片单击事件    $$(n).click();  },  //处理页面上一部分的逻辑  clickRight:function(){    //点击向右按钮处理事件    console.log(slide.index);    //当下标小于或等于最大图片数量时    if(slide.index<slide.arrMax){      //累加当前下标值      slide.index++;      slide.top.navEvent();    }  },  clickLeft:function(){    //点击向右按钮处理事件    console.log(slide.index);    //当下标小于或等于最大图片数量时    if(slide.index>1){      //累加当前下标值      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;        //在上部图片中显示点击小图片对应的大图片        $$(slide.imgMain).src=slide.arrImg[this.getAttribute('data-index')-1];        //重新记录焦点图片在数组中的对应下标位置        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();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：Javascript中常见的逻辑题和解决方法

下一篇：Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析