复制代码
  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>
复制代码