//html部分
1 <div id="wrap"> 2 <div id="slider"> 3 <a target="_blank" href="#"><img class="tu" src="../img/tu1.jpg" /></a> 4 <a target="_blank" href="#"><img id="second" /></a> 5 <a target="_blank" href="#"><img id="third" /></a> 6 <a target="_blank" href="#"><img id="four" /></a> 7 </div> 8 <ul id="ui"> 9 <li>1</li> 10 <li>2</li> 11 <li>3</li> 12 <li>4</li> 13 </ul> 14 </div>
//css 部分
1 <style type="text/css"> 2 #wrap 3 { 4 height: 500px; 5 width: 500px; 6 overflow: hidden; 7 position: relative; 8 overflow: hidden; 9 } 10 #wrap ul 11 { 12 list-style: none; 13 position: absolute; 14 top: 455px; 15 left: 332px; 16 17 } 18 #wrap li 19 { 20 margin-left:2px; 21 opacity:0 .3; 22 filter: alpha(opacity=30); 23 text-align: center; 24 line-height: 30px; 25 font-size: 20px; 26 height: 30px; 27 width: 30px; 28 background-color: #fff; 29 float: left; 30 border-radius:3px; 31 cursor:pointer; 32 } 33 #slider 34 { 35 position: absolute; 36 top: 0px; 37 left: 0px; 38 } 39 #slider img 40 { 41 float: left; 42 border: none; 43 } 44 .tu{ 45 height: 500px; 46 width: 500px; 47 } 48 #ui{ 49 z-index: 999; 50 }
//js 部分
1 <script type="text/javascript"> 2 window.onload = function () { 3 flag = 0; 4 obj1 = document.getElementById("slider"); 5 obj2 = document.getElementsByTagName("li"); 6 obj2[0].style.backgroundColor = "#666666"; 7 //默认被选中颜色 8 time = setInterval("turn();", 2000); 9 obj1.onmouseover = function () { 10 clearInterval(time); 11 } 12 obj1.onmouseout = function () { 13 time = setInterval("turn();", 2000); 14 } 15 16 for (var num = 0; num < obj2.length; num++) { 17 obj2[num].onmouseover = function () { 18 turn(this.innerHTML); 19 clearInterval(time); 20 } 21 obj2[num].onmouseout = function () { 22 time = setInterval("turn();", 2000); 23 } 24 } 25 //延迟加载图片，演示的时候，使用本地图片 26 //上线后请改为二级域名提供的图片地址 27 document.getElementById("second").src = "../img/tu2.jpg"; 28 document.getElementById("second").width ="500"; 29 document.getElementById("second").height ="500"; 30 31 //使用图片宽660，高550 32 document.getElementById("third").src = "../img/tu3.jpg"; 33 document.getElementById("third").width ="500"; 34 document.getElementById("third").height ="500"; 35 document.getElementById("four").src = "../img/tu4.jpg"; 36 document.getElementById("four").width ="500"; 37 document.getElementById("four").height ="500"; 38 } 39 function turn(value) { 40 if (value != null) { 41 flag = value - 2; 42 } 43 if (flag < obj2.length - 1) 44 flag++; 45 else 46 flag = 0; 47 obj1.style.top = flag * (-500) + "px"; 48 for (var j = 0; j < obj2.length; j++) { 49 obj2[j].style.backgroundColor = "#ffffff"; 50 } 51 obj2[flag].style.backgroundColor = "#666666"; 52 } 53 </script>
//源代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JS幻灯代码</title> 6 <script type="text/javascript"> 7 window.onload = function () { 8 flag = 0; 9 obj1 = document.getElementById("slider"); 10 obj2 = document.getElementsByTagName("li"); 11 obj2[0].style.backgroundColor = "#666666"; 12 //默认被选中颜色 13 time = setInterval("turn();", 2000); 14 obj1.onmouseover = function () { 15 clearInterval(time); 16 } 17 obj1.onmouseout = function () { 18 time = setInterval("turn();", 2000); 19 } 20 21 for (var num = 0; num < obj2.length; num++) { 22 obj2[num].onmouseover = function () { 23 turn(this.innerHTML); 24 clearInterval(time); 25 } 26 obj2[num].onmouseout = function () { 27 time = setInterval("turn();", 2000); 28 } 29 } 30 //延迟加载图片，演示的时候，使用本地图片 31 //上线后请改为二级域名提供的图片地址 32 document.getElementById("second").src = "../img/tu2.jpg"; 33 document.getElementById("second").width ="500"; 34 document.getElementById("second").height ="500"; 35 36 //使用图片宽660，高550 37 document.getElementById("third").src = "../img/tu3.jpg"; 38 document.getElementById("third").width ="500"; 39 document.getElementById("third").height ="500"; 40 document.getElementById("four").src = "../img/tu4.jpg"; 41 document.getElementById("four").width ="500"; 42 document.getElementById("four").height ="500"; 43 } 44 function turn(value) { 45 if (value != null) { 46 flag = value - 2; 47 } 48 if (flag < obj2.length - 1) 49 flag++; 50 else 51 flag = 0; 52 obj1.style.top = flag * (-500) + "px"; 53 for (var j = 0; j < obj2.length; j++) { 54 obj2[j].style.backgroundColor = "#ffffff"; 55 } 56 obj2[flag].style.backgroundColor = "#666666"; 57 } 58 </script> 59 <style type="text/css"> 60 #wrap 61 { 62 height: 500px; 63 width: 500px; 64 overflow: hidden; 65 position: relative; 66 overflow: hidden; 67 } 68 #wrap ul 69 { 70 list-style: none; 71 position: absolute; 72 top: 455px; 73 left: 332px; 74 75 } 76 #wrap li 77 { 78 margin-left:2px; 79 opacity:0 .3; 80 filter: alpha(opacity=30); 81 text-align: center; 82 line-height: 30px; 83 font-size: 20px; 84 height: 30px; 85 width: 30px; 86 background-color: #fff; 87 float: left; 88 border-radius:3px; 89 cursor:pointer; 90 } 91 #slider 92 { 93 position: absolute; 94 top: 0px; 95 left: 0px; 96 } 97 #slider img 98 { 99 float: left; 100 border: none; 101 } 102 .tu{ 103 height: 500px; 104 width: 500px; 105 } 106 #ui{ 107 z-index: 999; 108 } 109 110 111 </style> 112 </head> 113 <body> 114 <div id="wrap"> 115 <div id="slider"> 116 <a target="_blank" href="#"><img class="tu" src="../img/tu1.jpg" /></a> 117 <a target="_blank" href="#"><img id="second" /></a> 118 <a target="_blank" href="#"><img id="third" /></a> 119 <a target="_blank" href="#"><img id="four" /></a> 120 </div> 121 <ul id="ui"> 122 <li>1</li> 123 <li>2</li> 124 <li>3</li> 125 <li>4</li> 126 </ul> 127 </div> 128 </body> 129 </html>
// 效果预览
