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>
用插件有一个问题，图片大小变小时，会只显示一部分图片，没有将图片按比例缩小，后面解决这个问题。
时间： 2024-10-08 02:53:39