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样式。