前端-SuperSlide自动分页控制、自适应轮播图 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>SuperSlide自动分页控制</title>
 8     <link rel="stylesheet" href="css/reset.css">
 9     <style>
10 
11 /* 本案例CSS样式 */
12 #banner    .slideBox{ width:100%; height:auto; overflow:hidden; position:relative; }
13 #banner    .slideBox .hd{ width: 100%;height:15px; overflow:hidden; position:absolute; right:0px; bottom:5px; z-index:1; }
14 #banner    .slideBox .hd ul{ overflow:hidden; zoom:1; display: table;margin: 0 auto; }
15 #banner    .slideBox .hd ul li{float:left;margin-right:2px;width:60px;height:4px;line-height:14px;text-align:center;background:#fff;cursor:pointer;opacity:0.5;}
16 #banner    .slideBox .hd ul li.on{opacity:1}
17 #banner    .slideBox .bd{ position:relative; height:100%; z-index:0;   }
18 #banner    .slideBox .bd li{ zoom:1; vertical-align:middle; }
19 #banner    .slideBox .bd img{ width:100%; height:auto; display:block;  }
20     /* 下面是前/后按钮代码，如果不需要删除即可 */
21 #banner    .slideBox .prev,
22 #banner    .slideBox .next{ position:absolute; left:3%; top:50%; margin-top:-25px; display:block; width:32px; height:40px; filter:alpha(opacity=50);opacity:0.5;   }
23 #banner    .slideBox .next{ left:auto; right:3%; background-position:8px 5px; }
24 #banner    .slideBox .prev:hover,
25 #banner    .slideBox .next:hover{ filter:alpha(opacity=100);opacity:1;  }
26 #banner    .slideBox .prevStop{ display:none;  }
27 #banner    .slideBox .nextStop{ display:none;  }
28     </style>
29 </head>
30 <body>
31 <!-- banner -->
32     <!-- banner -->
33     <div id="banner">
34         <div id="slideBox" class="slideBox">
35             <div class="hd">
36                 <ul></ul>
37             </div>
38             <div class="bd">
39                 <ul>
40                     <li><img src="img/1.jpg" alt=""></li>
41                     <li><img src="img/2.jpg" alt=""></li>
42                     <li><img src="img/3.jpg" alt=""></li>
43                     <li><img src="img/4.jpg" alt=""></li>
44                 </ul>
45             </div>
46             <!-- 下面是前/后按钮代码，如果不需要删除即可 -->
47             <a class="prev" href="javascript:void(0)"> <img src="img/left.png" alt="上一页"></a>
48             <a class="next" href="javascript:void(0)"> <img src="img/right.png" alt="下一页"></a>
49         </div>      
50     </div>
51     <script src="js/jquery1.42.min.js"></script>
52     <script src="js/jquery.SuperSlide.2.1.3.js"></script>
53     <script>
54     // #banner轮播图控制
55     $("#banner > .slideBox").slide({ titCell:".hd ul",mainCell: ".bd ul",effect: "leftLoop", autoPlay: true, scroll: 1, vis: "auto",interTime:5000,autoPage:'<li></li>' });
56     </script>
57 <!-- banner END-->
58 </body>
59 </html>

 

posted @ 2019-08-17 14:47  suni1024  阅读(1838)  评论(0)    收藏  举报