JavaScript一个简单的图片切换布局

浏览数：37 / 时间：2015年06月08日

 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>