效果：
如圖所示：
1.點擊圓點切換圖片
2.點擊箭頭切換圖片
3.x秒後自動往後跳一張圖（圖中未演示）
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery全屏banner焦點圖切換代碼</title>
<script type="text/javascript" src="js/jQuery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
<style>
/* css 重置 */
body,div,ul,li,dl,dt,dd,h2,p{padding:0;margin:0;font-family:"微軟雅黑";}
ul{list-style:none ;}
img{border:none;}
a{blr:expression(this.onFocus=this.blur());outline:none;}
/* banner-box */
.banner-box{min-width:1210px;height:360px;position:relative;overflow:hidden;}
.banner-box .bd{ width:100% !important;}
.banner-box .bd li .m-width {width:1210px;margin:0 auto;overflow:hidden;}
.banner-box .bd li{width:100% !important;height:360px;}
.banner-box .bd li a{display:block;background-size:auto;}
.banner-btn{width:1210px;position:absolute;top:120px;left:50%;margin-left:-605px;}
.banner-btn a{display:block;width:49px;height:104px;position:absolute;top:0;filter:alpha(opacity=40);-moz-opacity:0.4;-khtml-opacity:0.4;opacity:0.4;}
.banner-btn a.prev{left:20px;background:url(img/foot.png) no-repeat 0 0;}
.banner-btn a.next{right:20px;background:url(img/foot.png) no-repeat -49px 0;}
.banner-box .hd {position:absolute;top:210px;left:537px;}
.banner-box .hd ul li{width:12px;height:12px;border-radius :50%;text-indent:-9999px;margin-right:20px;background:#ccc;float:left;cursor:pointer;}
.banner-box .hd ul li.on{background:#DA324D;}
</style>
</head>
<body>
<div class="banner-box">
<div class="bd">
<ul>
<li style="background:#F3E5D8;">
<div class="m-width">
<a href="javascript:void(0);"><img src="img/img1.jpg" /></a>
</div>
</li>
<li style="background:#B01415">
<div class="m-width">
<a href="javascript:void(0);"><img src="img/img2.jpg" /></a>
</div>
</li>
<li style="background:#C49803;">
<div class="m-width">
<a href="javascript:void(0);"><img src="img/img3.jpg" /></a>
</div>
</li>
<li style="background:#FDFDF5">
<div class="m-width">
<a href="javascript:void(0);"><img src="img/img4.jpg" /></a>
</div>
</li>
</ul>
</div>
<div class="banner-btn">
<a class="prev" href="javascript:void(0);"></a>
<a class="next" href="javascript:void(0);"></a>
<div class="hd">
<ul></ul>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".prev,.next").hover(function(){
$(this).stop(true,false).fadeTo("show",0.9);
},function(){
$(this).stop(true,false).fadeTo("show",0.4);
});
$(".banner-box").slide({
titCell:".hd ul",
mainCell:".bd ul",
effect:"fold",
interTime:3500,//跳轉間隔時間
delayTime:500,
autoPlay:true,
autoPage:true,
trigger:"click"
});
});
</script>
</body>
</html>
