具体需求见方案一。
这种方案是老师给出的，相比方案一更加专业。
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 #main{
8 border: solid 1px red;
9 margin: 20px auto;
10 width: 500px;
11 }
12 #top{
13 text-align: center;
14 }
15 #imgl,#imgr{
16 margin-bottom: 70px;
17 }
18 #img{
19 margin: 0px 50px;
20 }
21 .initClass{
22 width: 50px;
23 border: solid 2px #fff;
24 margin:10px 5px;
25 }
26 .focusClass{
27 width: 50px;
28 border: solid 2px red;
29 margin:10px 5px;
30 }
31 </style>
32 <script type="text/javascript" src="js/system.js"></script>
33 </head>
34 <body>
35 <div id="main">
36 <div id="top">
37 <img src="images/left.png" id="imgl">
38 <img src="images/1.jpg" id="img">
39 <img src="images/right.png" id="imgr">
40 </div>
41 <div id="bottom">
42 <img src="images/1.jpg" id="img1" class="focusClass" data-index="1">
43 <img src="images/2.jpg" id="img2" class="initClass" data-index="2">
44 <img src="images/3.jpg" id="img3" class="initClass" data-index="3">
45 <img src="images/4.jpg" id="img4" class="initClass" data-index="4">
46 <img src="images/5.jpg" id="img5" class="initClass" data-index="5">
47 <img src="images/6.jpg" id="img6" class="initClass" data-index="6">
48 <img src="images/7.jpg" id="img7" class="initClass" data-index="7">
49 </div>
50 </div>
51 <script type="text/javascript">
52 var slide={
53 arrImg:new Array("images/1.jpg","images/2.jpg","images/3.jpg",
54 "images/4.jpg","images/5.jpg","images/6.jpg","images/7.jpg"),
55 initClass:"initClass",
56 focusClass:"focusClass",
57 index:1,
58 arrMax:7,
59 imgMain:"img"
60 }
61 slide.top= {
62 navEvent: function () {
63 //上部分大图片显示累加后下标对应的图片
64 $$(slide.imgMain).src = slide.arrImg[slide.index - 1];
65 //根据焦点下标值组合成导航图片名称
66 var n = "img" + slide.index;
67 //执行对应导航图片的单击事件
68 $$(n).click();
69 },
70 //处理页面上一部分的逻辑
71 clickRight: function () {
72 //点击向右按钮处理事件
73 console.log(slide.index);
74 //当下标小于或等于最大图片数量时
75 if (slide.index < slide.arrMax) {
76 //累加当前焦点下标值
77 slide.index++;
78 //执行点击右键时的图片导航效果
79 slide.top.navEvent();
80 }
81 },
82 clickLeft: function () {
83 //点击向右按钮处理事件
84 console.log(slide.index);
85 if (slide.index > 1) {
86 //累加当前焦点下标值
87 slide.index--;
88 //执行点击左键时的图片导航效果
89 slide.top.navEvent();
90 }
91 }
92 }
93 slide.bottom= {
94 initImgClass: function () {
95 //初始化全部底部图片的样式
96 for (var i = 1; i <= slide.arrMax; i++) {
97 var n = "img" + i;
98 $$(n).className = slide.initClass;
99 }
100 },
101 initPage: function () {
102 //处理页面下一部分的逻辑
103 $$("imgl").onclick=function(){
104 slide.top.clickLeft();
105 }
106 $$("imgr").onclick=function(){
107 slide.top.clickRight();
108 }
109 //获取所有的底部下图片
110 for (var i = 1; i <= slide.arrMax; i++) {
111 //为每一张图片绑定点击事件
112 var n = "img" + i;
113 $$(n).onclick = function () {
114 //初始化全部样式
115 slide.bottom.initImgClass();
116 //图片元素本身获取焦点样式
117 this.className = slide.focusClass;
118 //在上部图片中显示点击小图的对应大图片
119 $$(slide.imgMain).src=slide.arrImg[this.getAttribute("data-index")-1];
120 //重新记录焦点图片在数组中的对应下标位置
121 slide.index=this.getAttribute("data-index");
122 }
123 }
124 }
125 }
126 slide.bottom.initPage();
127 </script>
128 </body>
129 </html>
时间： 2024-10-07 10:58:20