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>