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>