用js 做大图轮播方法（一）

//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>

// 效果预览