1 @charset "utf-8"; 2 /* CSS Document */ 3 4 *{ 5 margin:0; 6 padding:0; 7 font-size:12px; 8 } 9 .ad{ 10 height:450px; 11 overflow:hidden; 12 width:800px; 13 margin: 20px auto; 14 }
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>焦点图制作</title> 6 <link href="focus.css" rel="stylesheet" type="text/css"> 7 <!--焦点图设置--> 8 <script src="http://demo.jb51.net/js/myfocus/content/templates/myfocus/js/myfocus-2.0.1.min.js"></script> 9 <script type="text/javascript"> 10 myFocus.set({ 11 //此处id与后面一致 12 id:'picBox' 13 }); 14 </script> 15 </head> 16 17 <body> 18 <!--此处id必须为picBox，与前面焦点图初始化的id一致--> 19 <div class="ad" id="picBox"> 20 <!--当图片没加载出来时的缓冲提示图--> 21 <div class="loading"><img src="http://img.mukewang.com/53edad8c000175cb00300029.jpg" 22 alt= "Loading..."></div> 23 <!--图片列表外面必须有一个div， 其class必须为pic--> 24 <div class="pic"> 25 <ul> 26 <li><img src="http://img.mukewang.com/53ad2498000174af13660768.jpg" alt=""></li> 27 <li><img src="53ad26320001289e13660768.jpg" alt=""></li> 28 <li><img src="http://img.mukewang.com/53ad25df0001300613660768.jpg" alt=""></li> 29 <li><img src="http://img.mukewang.com/53ad26010001ac1113660768.jpg" alt=""></li> 30 <li><img src="http://img.mukewang.com/53ad26170001a86013660768.jpg" alt=""></li> 31 </ul> 32 </div> 33 </div><!--ad结束--> 34 </body> 35 </html>
用插件有一个问题，图片大小变小时，会只显示一部分图片，没有将图片按比例缩小，后面解决这个问题。