特效描述：宽屏幻灯片 遮罩图片 滚动轮播。jquery宽屏幻灯片遮罩图片滚动轮播特效代码下载
代码结构
1. 引入JS
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/superslide.2.1.js"></script>
2. HTML代码
<div class="slider">
<div class="bd">
<ul>
<li><a href="https://www.51qianduan.com/">51前端</a></li>
<li><a href="https://www.51qianduan.com/">51前端</a></li>
<li><a href="https://www.51qianduan.com/">51前端</a></li>
<li><a href="https://www.51qianduan.com/">51前端</a></li>
</ul>
</div>
<div class="hd"><ul></ul></div>
<div class="pnBtn prev"><span class="blackBg"></span><a class="arrow" href="javascript:void(0)"></a></div>
<div class="pnBtn next"><span class="blackBg"></span><a class="arrow" href="javascript:void(0)"></a></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
/* 设置第一张图片 */
$(".slider .bd li").first().before($(".slider .bd li").last());
/* 鼠标悬停箭头按钮显示 */
$(".slider").hover(function(){
$(this).find(".arrow").stop(true,true).fadeIn(300)
},function(){
$(this).find(".arrow").fadeOut(300)
});
/* 滚动切换 */
$(".slider").slide({
titCell:".hd ul",
mainCell:".bd ul",
effect:"leftLoop",
autoPlay:true,
vis:3,
autoPage:true,
trigger:"click"
});
});
</script>
