1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 html body { 8 margin: 0; 9 padding: 0; 10 } 11 li{ 12 list-style: none; 13 } 14 .div1{ 15 width: 500px; 16 height: 400px; 17 margin: 50px auto; 18 position: relative; 19 border: 1px solid black; 20 21 } 22 .div1 a img { 23 width: 400px; 24 position: absolute; 25 margin: 118px 50px; 26 } 27 .div1 ul{ 28 position: absolute; 29 bottom: 110px; 30 right:53px; 31 z-index: 10; 32 } 33 .div1 ul li { 34 width: 15px; 35 height: 15px; 36 line-height: 15px; 37 border-radius: 50%; 38 float: left; 39 background-color: white; 40 margin-right: 5px; 41 cursor: pointer; 42 text-align: center; 43 } 44 </style> 45 </head> 46 <body> 47 <div class="div1" id="div1"> 48 <a href="javascript:void(0)"><img src="img/1.png"></a> 49 <a href="javascript:void(0)"><img src="img/2.png"></a> 50 <a href="javascript:void(0)"><img src="img/3.png"></a> 51 <a href="javascript:void(0)"><img src="img/44.jpg"></a> 52 <a href="javascript:void(0)"><img src="img/55.jpg"></a> 53 <ul> 54 <li>1</li> 55 <li>2</li> 56 <li>3</li> 57 <li>4</li> 58 <li>5</li> 59 </ul> 60 </div> 61 <script> 62 var div1 = document.getElementById("div1");//整個區域 63 var a1 = div1.getElementsByTagName("a");//a標簽 圖片 64 var li1 = div1.getElementsByTagName("li");//右下角按鈕 65 var ab = 0; //ab的值控制觸摸按鈕后的下一張圖 66 //遍歷所有圖和按鈕,頁面加載完畢顯示第一張圖和第一個按鈕 67 window.onload = function () { 68 for (var i=0;i<a1.length;i++){ 69 if (i!=0){ 70 a1[i].style.opacity = 0; 71 }else { 72 li1[i].style.backgroundColor = "green"; 73 } 74 } 75 }; 76 //運行函數bb(); 77 function bb() { 78 for (var j=0;j<li1.length;j++) { 79 //遍歷所有的按鈕,所有按鈕都給綁定一個鼠標移上去的onmouseover事件 80 li1[j].onmouseover = function () { 81 //變量index就是當前觸摸的按鈕的文本-1,此前特意設置按鈕文本為數字 82 var index = this.innerHTML - 1; 83 ab = index; //ab后面用return返回 84 //聲明變量b 85 for (var b = 0; b < li1.length; b++) { 86 //當b就是被觸摸到的按鈕的索引號時,設置第b張圖片不透明度為100,漸變透明度效果1s,第b個按鈕背景色變成green 87 if (b == index) { 88 a1[b].style.opacity = 100; 89 a1[b].style.transition = "opacity 1s"; 90 li1[b].style.backgroundColor = "green"; 91 } else { //當b不是被觸摸到的按鈕的索引號時,就變透明,按鈕顏色白色. 92 a1[b].style.opacity = 0; 93 li1[b].style.backgroundColor = "white"; 94 } 95 } 96 return ab; //返回ab,貌似運用到了閉包?不太了解. 97 } 98 99 } 100 setInterval(function ac() { //設置2000毫秒重復運行 101 ab = ab>li1.length-2?0:++ab; //5張圖,當觸摸到的按鈕索引號大於3時(比如4),那么ab=0(下一張圖為第0張),否則++ab; 102 //循環遍歷下一張圖的效果. 103 for (var b = 0; b < li1.length; b++) { 104 if (b == ab) { 105 a1[b].style.opacity = 100; 106 a1[b].style.transition = "opacity 1s"; 107 li1[b].style.backgroundColor = "green"; 108 } else { 109 a1[b].style.opacity = 0; 110 li1[b].style.backgroundColor = "white"; 111 } 112 } 113 },2000); 114 } 115 bb(); //運行bb() 116 </script> 117 </body> 118 </html>
貌似用到了閉包?菜鳥新手不是很理解.
參考:阮一峰的網絡日志
http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
