特效描述:宽屏幻灯片 遮罩图片 滚动轮播。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>