上下图片连动效果

时间 2019-12-02
标签上下图片连动效果繁體版
原文原文链接
 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7  #main{
 8  border: solid 1px red;
 9  margin:auto;
 10  width: 500px;
 11         }
 12  #top{
 13  text-align: center;
 14         }
 15  .initClass{
 16  width: 50px;
 17  border:solid 2px white;
 18  margin:10px 5px;
 19         }
 20  .focusClass{
 21  width: 50px;
 22  border:solid 2px red;
 23  margin:10px 5px;
 24         }
 25     </style>
 26     <script src="js/system.js"></script>
 27 </head>
 28 <body>
 29 <div id="main">
 30     <div id="top">
 31         <img src="images/1.jpg" id="iml"/>
 32         <img src="images/5.jpg" id="img">
 33         <img src="images/2.jpg" id="imr"/>
 34     </div>
 35     <div id="buttom">
 36         <img src="images/ss5.jpg" id="img1" class="focusClass" data-index="1"/>
 37         <img src="images/ss6.jpg" id="img2" class="initClass" data-index="2"/>
 38         <img src="images/ss7.jpg" id="img3" class="initClass" data-index="3"/>
 39         <img src="images/ss8.jpg" id="img4" class="initClass" data-index="4"/>
 40         <img src="images/ss9.jpg" id="img5" class="initClass" data-index="5"/>
 41         <img src="images/ss10.jpg" id="img6" class="initClass" data-index="6"/>
 42         <img src="images/ss11.jpg" id="img7" class="initClass" data-index="7"/>
 43     </div>
 44 </div>
 45 <script type="text/javascript">
 46     var slide={  47  arr:new Array("images/5.jpg","images/6.jpg","images/7.jpg",  48                 "images/8.jpg","images/9.jpg", "images/10.jpg","images/11.jpg"),  49  initClass:"initClass",  50  focusClass:"focusClass",  51  index:1,  52  arrMax:7,  53  imgMain:"img",  54  }  55  slide.top={  56  naEvent:function(){//上部大图显示累加后下标对应的图片
 57  $$(slide.imgMain).src=slide.arr[slide.index-1];//根据焦点下标值组成导航图片名称
 58             var n="img"+slide.index;  59  console.log(n);//之星对应导航图片的单击事件
 60  $$(n).click();  61  },  62         //处理页面上部内容
 63  clickRight:function(){//点击向由按钮时
 64  console.log(slide.index);  65             //累加当前下标志
 66             //档下标值小于或等于最大图片数量时
 67             if(slide.index<slide.arrMax){  68  slide.index++;//执行点击右箭头时的事件
 69  slide.top.naEvent();  70  }  71  },  72  clickLeft:function() {  73  console.log(slide.index);  74             if (slide.index >1) {//点击向左按钮时
 75  slide.index--;  76  slide.top.naEvent();  77  }  78  }  79  }  80  slide.bottom={  81  initImgClass:function(){//初始化所有底部图片的样式
 82             for(var i=1;i<=slide.arrMax;i++){  83                 var n="img"+i;  84  $$(n).className=slide.initClass;  85  }  86  },  87  initPage: function(){//点击左右箭头
 88  $$("iml").onclick=function(){  89  slide.top.clickLeft();  90  }  91  $$("imr").onclick=function(){  92  slide.top.clickRight();  93  }  94             //处理页面下部内容
 95             //获取底部全部的图片
 96             for(var i=1;i<=slide.arrMax;i++){//为每个图片绑定点击事件
 97                 var n="img"+i;  98  $$(n).onclick=function(){  99  slide.bottom.initImgClass();//图片自己获取焦点
100                     this.className=slide.focusClass;//在上部图片中显示点击小图对应的大图
101  $$(slide.imgMain).src=slide.arr[ this.getAttribute("data-index")-1];//重置记录焦点图片在数组中的对应下标位置
102                     //只有遍历的时候this才有效。其余时候无效
103  slide.index= this.getAttribute("data-index"); 104  } 105  } 106  } 107  } 108     // slide.autoPlay={
109     // Play:function(){
110     // for(var i=1;i<=slide.arrMax;i++){
111     // var m=1;
112     // var objP= setInterval(function(){
113     // var n="img"+m;
114     // $$(n).click();
115     // m++;
116     // if(m>6) {
117     // m=1;
118     // }
119     // },1000)
120     // }
121     // 122     // }
123     // }
124  slide.bottom.initPage(); 125     // slide.autoPlay.Play();
126 </script>
127 </body>
128 </html>