<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SuperSlide自动分页控制</title>
<link rel="stylesheet" href="css/reset.css">
<style> /* 本案例CSS样式 */
#banner .slideBox{ width:100%; height:auto; overflow:hidden; position:relative; }
#banner .slideBox .hd{ width: 100%;height:15px; overflow:hidden; position:absolute; right:0px; bottom:5px; z-index:1; }
#banner .slideBox .hd ul{ overflow:hidden; zoom:1; display: table;margin: 0 auto; }
#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;}
#banner .slideBox .hd ul li.on{opacity:1}
#banner .slideBox .bd{ position:relative; height:100%; z-index:0; }
#banner .slideBox .bd li{ zoom:1; vertical-align:middle; }
#banner .slideBox .bd img{ width:100%; height:auto; display:block; }
/* 下面是前/后按钮代码，如果不需要删除即可 */
#banner .slideBox .prev,
#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; }
#banner .slideBox .next{ left:auto; right:3%; background-position:8px 5px; }
#banner .slideBox .prev:hover,
#banner .slideBox .next:hover{ filter:alpha(opacity=100);opacity:1; }
#banner .slideBox .prevStop{ display:none; }
#banner .slideBox .nextStop{ display:none; }
</style>
</head>
<body>
<!-- banner -->
<!-- banner -->
<div id="banner">
<div id="slideBox" class="slideBox">
<div class="hd">
<ul></ul>
</div>
<div class="bd">
<ul>
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
</ul>
</div>
<!-- 下面是前/后按钮代码，如果不需要删除即可 -->
<a class="prev" href="javascript:void(0)"> <img src="img/left.png" alt="上一页"></a>
<a class="next" href="javascript:void(0)"> <img src="img/right.png" alt="下一页"></a>
</div>
</div>
<script src="js/jquery1.42.min.js"></script>
<script src="js/jquery.SuperSlide.2.1.3.js"></script>
<script>
// #banner轮播图控制
$("#banner > .slideBox").slide({ titCell:".hd ul",mainCell: ".bd ul",effect: "leftLoop", autoPlay: true, scroll: 1, vis: "auto",interTime:5000,autoPage:'<li></li>' });
</script>
<!-- banner END-->
</body>
</html>