图片轮播+手动播放 

  1 一、html代码部分（et.thtml）：
  2 <!DOCTYPE html>
  3 <html>
  4 <head lang="en">
  5     <meta charset="UTF-8">
  6     <title></title>
  7     <link type="text/css" rel="stylesheet" href="css/styleet.css">
  8     <script type="text/javascript" src="js/system.js"></script>
  9 </head>
 10 <body>
 11     <div id="main">
 12        <div id="top">
 13            <span id="imgL" class="span1"></span>
 14            <img src="images/1.jpg" id="img" data-index="1" alt=""/>
 15            <span id="imgR" class="span2"></span>
 16        </div>
 17        <div id="bottom">
 18            <img src="images/1.jpg" id="img1" class="focusClass" data-index="1" alt=""/>
 19            <img src="images/2.jpg" id="img2" class="initClass" data-index="2" alt=""/>
 20            <img src="images/3.jpg" id="img3" class="initClass" data-index="3" alt=""/>
 21            <img src="images/4.jpg" id="img4" class="initClass" data-index="4" alt=""/>
 22            <img src="images/5.jpg" id="img5" class="initClass" data-index="5" alt=""/>
 23            <img src="images/6.jpg" id="img6" class="initClass" data-index="6" alt=""/>
 24            <img src="images/7.jpg" id="img7" class="initClass" data-index="7" alt=""/>
 25        </div>
 26     </div>
 27     <script type="text/javascript" src="js/et.js"></script>
 28 </body>
 29 </html>
 30 二、css代码部分（styleet,css）:
 31 #main span{
 32     width: 22px;
 33     height: 38px;
 34     position: absolute;
 35     display: inline-block;
 36     cursor: pointer;
 37     background: url("../images/1.png") no-repeat 0 0;
 38 }
 39 .span1{
 40     background-position: 0 0;
 41     left:20px;
 42     top: 90px;
 43 }
 44 .span2{
 45     background-position: -22px 0;
 46     right: 20px;
 47     top: 90px;
 48 }
 49 #main{
 50     width: 500px;
 51     margin: 20px auto;
 52     text-align: center;
 53     border: solid 2px red;
 54     position: relative;
 55 }
 56 .initClass{
 57     width: 50px;
 58     border: solid 2px #fff;
 59     margin: 10px 5px;
 60 }
 61 .focusClass{
 62     width: 50px;
 63     border: solid 2px red;
 64     margin: 10px 5px;
 65 }
 66 三、js代码部分（et.js）：
 67 /**
 68  * Created by LuanReco on 2015/8/28.
 69  */
 70 var slide={
 71     arrImg:new Array('images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg','images/7.jpg'),
 72     initClass:'initClass',
 73     focusClass:'focusClass',
 74     index:1,
 75     arrMax:7,
 76     imgMain:'img'
 77 }
 78 slide.top={
 79     //导航事件
 80     navEvent:function(){
 81         //上部分大图片显示累加后下标对应的图片
 82         $$(slide.imgMain).src=slide.arrImg[slide.index-1];
 83         //根据焦点下标值组合成导航图片名称
 84         var n='img'+slide.index;
 85         //执行对应导航图片单击事件
 86         $$(n).click();
 87     },
 88     //处理页面上一部分的逻辑
 89     clickRight:function(){
 90         //点击向右按钮处理事件
 91         console.log(slide.index);
 92 
 93         //当下标小于或等于最大图片数量时
 94         if(slide.index<slide.arrMax){
 95             //累加当前下标值
 96             slide.index++;
 97             slide.top.navEvent();
 98         }
 99 
100     },
101     clickLeft:function(){
102         //点击向右按钮处理事件
103         console.log(slide.index);
104 
105         //当下标小于或等于最大图片数量时
106         if(slide.index>1){
107             //累加当前下标值
108             slide.index--;
109             slide.top.navEvent();
110         }
111 
112     }
113 }
114 slide.bottom={
115     initImgClass:function(){
116         //初始化全部对不图片的样式
117         for(var i=1;i<=slide.arrMax;i++){
118             var n='img'+i;
119             $$(n).className=slide.initClass;
120         }
121     },
122     click:function(){
123         //处理页面下一部分的逻辑
124         $$('imgL').onclick=function(){
125             slide.top.clickLeft();
126         }
127         $$('imgR').onclick=function(){
128             slide.top.clickRight();
129         }
130         //获取所有底部的小图片
131         for(var i=1;i<=slide.arrMax;i++){
132             //为每一张图片绑定点击事件
133             var n='img'+i;
134             $$(n).onclick=function(){
135                 //初始化全部样式
136                 slide.bottom.initImgClass();
137                 //图片元素本身获取焦点样式
138                 this.className=slide.focusClass;
139                 //在上部图片中显示点击小图片对应的大图片
140                 $$(slide.imgMain).src=slide.arrImg[this.getAttribute('data-index')-1];
141                 //重新记录焦点图片在数组中的对应下标位置
142                 slide.index=this.getAttribute('data-index');
143             }
144         }
145     }
146 }
147 slide.autoplay={
148     play:function(){
149         var m=1;
150         //for(var i=1;i<=slide.arrMax;i++){
151             setInterval(function(){
152                 var n='img'+m;
153                 m++;
154                 $$(n).click();
155                 if(m>6)
156                     m=1;
157             },1000)
158         //}
159     }
160 }
161 
162 slide.autoplay.play();
163 slide.bottom.click();

 

posted @ 2015-08-28 14:32  reco_luan  阅读(371)  评论(0)    收藏  举报