jQuery三屏前后图片预览焦点图

时间：2014-10-10 来源：互联网

特效说明：

一款jQuery三屏前后图片预览焦点图网页特效免费下载，带左右按钮，点击按钮左右平滑滚动切换，自动轮播切换焦点图JS代码。（兼容测试：IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器）

使用方法：

1、调用CSS样式：
<link rel="stylesheet" type="text/css" href="css/style.css" />

2、调用JS插件代码：
<script type="text/javascript" src="js/jquery1.42.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide2.js"></script>

3、添加HTML代码：
将......之间的html和js代码；放在<body></body>之间。

4、JS代码片段：
<script type="text/javascript">
/* 把最后一个放到第一个前面，然后通过外层ul{margin-left:-630px !important; }来显示第一个 */
jQuery(".slider .bd li").first().before( jQuery(".slider .bd li").last() );
/* 控制左右按钮显示 */
jQuery(".slider .pnBtn").hover(function(){ jQuery(this).find(".arrow").show() },function(){ jQuery(this).find(".arrow").hide() });
/* 调用SuperSlide */
jQuery(".slider").slide({ mainCell:".bd ul", effect:"leftLoop", autoPlay:true, vis:3, mouseOverStop:false });
</script>

标签左右按钮自动轮播左右滑动 jQuery焦点图

预览收藏分享评论