1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <style type="text/css">
7 *{ padding:0; margin:0;}
8 #slider{ width:100%; position:relative; border:0px solid red; height:320px;overflow:hidden; margin:50px auto;}
9 .pic{ width:1000px; height:320px; position:absolute; left:50%; margin-left:-500px; border:0px solid red;overflow:hidden;}
10 .pic ul{ height:320px; border:0px solid red;}
11 .pic ul li{ width:1000px; float:left; list-style:none;}
12 .pic img { width:1000px; height:320px; border:none; float:left;}
13
14 .pre{ width:100%; height:320px; background:#ccc; position:absolute; left:-50%; margin-left:-500px; z-index:2;}
15 .next{ width:100%; height:320px; background:#ccc; position:absolute; left:50%; margin-left:500px; z-index:2;}
16 .hd{ width:100%; height:25px; border:01px solid green; position:absolute; bottom:5px; text-align:center; z-index:3;}
17 .hd a{ width:25px; height:25px; display:block; margin:0 5px; text-align:center; color:#fff; background:#000; float:left;}
18 .hd a.on{ color:#FFCC00;}
19 </style>
20 <!---->
21 <script type="text/javascript">
22 window.onload = function (){
23 var oPic = document.getElementById("sPic");
24 var aLi = oPic.getElementsByTagName("li");
25 var oD = document.getElementById("hd");
26 oPic.style.width = aLi[0].offsetWidth * aLi.length + "px";
27
28 for(var i=0;i<aLi.length;i++){
29 var oA = document.createElement("a");
30 oA.innerHTML = i+1;
31 if(i==0){
32 oA.className = "on";
33 }
34 oA.href = "javascript:;";
35 oD.appendChild(oA);
36 }
37 }
38 </script>
39
40 </head>
41
42 <body>
43
44 <div id="slider">
45 <div class="pic">
46 <ul id="sPic">
47 <li><a href=""><img src="images/3260.jpg" /></a></li>
48 <li><a href=""><img src="images/3260.jpg" /></a></li>
49 <li><a href=""><img src="images/3260.jpg" /></a></li>
50 <li><a href=""><img src="images/3260.jpg" /></a></li>
51 <li><a href=""><img src="images/3260.jpg" /></a></li>
52 <li><a href=""><img src="images/3260.jpg" /></a></li>
53 </ul>
54 </div>
55
56 <div class="hd" id="hd"></div>
57
58 <div class="pre"></div>
59 <div class="next"></div>
60
61
62 </div>
63
64 </body>
65 </html>