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 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 500px; 51 margin: 20px auto; 52 text-align: center; 53 border: solid 2px red; 54 position: relative; 55 } 56 .initClass{ 57 50px; 58 border: solid 2px #fff; 59 margin: 10px 5px; 60 } 61 .focusClass{ 62 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();