关于使用JavaScript实现图片点击切换（附带改变导航图片 方案二）
具体需求见方案一。
这种方案相比方案一更加专业。
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>
