上下圖片連動效果

時間 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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。