所属分类:网页特效-焦点图/幻灯片,图片特效,触屏/拖拽/下拉
使用方法:
引入jQuery库文件、插件JS文件、CSS样式文件
<link rel="stylesheet" href="main.css" />
<script type="text/javascript" src="jquery1.42.min.js">script>
<script type="text/javascript" src="jquery.SuperSlide.2.1.1.js">script>
插件初始化、配置
jQuery(".picScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"left",autoPlay:true,vis:3,trigger:"click"});
HTML部分
<div class="picScroll-left">
<div class="hd">
<a class="prev" href="javascript:void(0)"><img src="img/left.jpg" /></a>
<a class="next" href="javascript:void(0)"><img src="img/right.jpg"/></a>
</div>
<div class="bd">
<ul class="picList">
<li>
<div class="pic"><a href="#"><img src="img/1.jpg"/></a></div>
<div class="title"><a href="#">效果图1</a></div>
</li>
<li>
<div class="pic"><a href="#"><img src="img/2.jpg" /></a></div>
<div class="title"><a href="#">效果图2</a></div>
</li>
<li>
<div class="pic"><a href="#"><img src="img/3.jpg" /></a></div>
<div class="title"><a href="#">效果图3</a></div>
</li>
<li>
<div class="pic"><a href="#"><img src="img/4.jpg" /></a></div>
<div class="title"><a href="#">效果图4</a></div>
</li>
<li>
<div class="pic"><a href="#"><img src="img/5.jpg" /></a></div>
<div class="title"><a href="#">效果图5</a></div>
</li>
<li>
<div class="pic"><a href="#"><img src="img/6.jpg" /></a></div>
<div class="title"><a href="#">效果图6</a></div>
</li>
<li>
<div class="pic"><a href="#"><img src="img/7.jpg" /></a></div>
<div class="title"><a href="#">效果图6</a></div>
</li>
<li>
<div class="pic"><a href="#"><img src="img/8.jpg" /></a></div>
<div class="title"><a href="#">效果图6</a></div>
</li>
<li>
<div class="pic"><a href="#"><img src="img/9.jpg" /></a></div>
<div class="title"><a href="#">效果图6</a></div>
</li>
</ul>
</div>
</div>