焦点图的制作

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>焦点图</title>
 6 <link href="focus1.css" rel="stylesheet" type="text/css">
 7 </head>
 8 
 9 <body>
10 <div id="focus">
11   <div>        
12    <ul id="img">
13    <li><img src="http://img.mukewang.com/53ad2498000174af13660768.jpg" alt=""></li>
14    <li><img src="http://img.mukewang.com/53ad25df0001300613660768.jpg" alt=""></li>
15    <li><img src="http://img.mukewang.com/53ad26010001ac1113660768.jpg" alt=""></li>
16    <li><img src="http://img.mukewang.com/53ad26170001a86013660768.jpg" alt=""></li>
17    <li><img src="http://img.mukewang.com/53ad26320001289e13660768.jpg" alt=""></li>
18    </ul>
19   </div><!--img结束-->
20   <div class="number">
21        <a class="on"></a>
22        <a></a>
23        <a></a>
24        <a></a>
25        <a></a>
26   </div>
27 </div>
28 <script>
29    window.onload=function(){
30        var img=document.getElementById("img");
31        var number=document.getElementsByClassName("number")[0];
32        var a=number.getElementsByTagName("a");
33        for(i=0;i<a.length;i++){
34            a[i].index=i;
35             a[i].onmouseover=function(){
36                 for(j=0;j<a.length;j++){
37                     a[j].className="";}
38                 a[this.index].className="on";
39                 img.style.left=-this.index*800+"px";
40                 }
41             }
42        }
43 </script>
44 </body>
45 </html>

 1 @charset "utf-8";
 2 /* CSS Document */
 3 *{margin:0;padding:0;}
 4 
 5 body{font-size:14px;}
 6 
 7 img{border:none;}
 8 
 9 li{list-style:none;}
10 
11 input,select,textarea{outline:none;}
12 
13 textarea{resize:none;}
14 
15 a{text-decoration:none;}
16 #focus{
17     width:800px;
18     height:450px;
19     margin:100px auto;
20     overflow:hidden;
21     position:relative;}
22 #img{
23     width:4000px;
24     position:absolute;
25     left:0;
26     top:0;
27     }
28 #img li{
29     float:left;
30     }
31 #img li img{
32     display:block;
33     width:800px;
34     height:100%;}
35 .number{
36     width:100%;
37     text-align:center;
38     position:absolute;
39     left:0;
40     bottom:20px;}
41 .number a{
42     width:30px;
43     height:6px;
44     background:#fff;
45     /*这里a设置成inline-block格式，才出现了，为什么*/
46     display:inline-block;}
47 .number a.on{
48     background:orange;}

焦点图的制作，自己写的代码。另一篇是用了插件，自己写也蛮简单的，注意a要设置成inline-block样式。