jquery.tools.scrollable三屏图片滚动插件

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>

2. HTML代码

<div class="box">
	<div class="b b1">
		<ul class="lst lst1">
			<li><img src="images/1.jpg" alt="" /></li>
			<li><img src="images/2.jpg" alt="" /></li>
			<li><img src="images/3.jpg" alt="" /></li>
			<li><img src="images/4.jpg" alt="" /></li>
			<li><img src="images/5.jpg" alt="" /></li>
		</ul>
	</div>
	<div class="b b2">
		<ul class="lst lst2">
			<li><img src="images/2.jpg" alt="" /></li>
			<li><img src="images/3.jpg" alt="" /></li>
			<li><img src="images/4.jpg" alt="" /></li>
			<li><img src="images/5.jpg" alt="" /></li>
			<li><img src="images/1.jpg" alt="" /></li>
		</ul>
	</div>
	<div class="b3">
		<ul class="lst lst3">
			<li><img src="images/3.jpg" alt="" /></li>
			<li><img src="images/4.jpg" alt="" /></li>
			<li><img src="images/5.jpg" alt="" /></li>
			<li><img src="images/1.jpg" alt="" /></li>
			<li><img src="images/2.jpg" alt="" /></li>
		</ul>
	</div>
	<div class="cen">
		<h3 class="cenTit">娱乐一刻</h3>
		<p class="wrd">朋友聚餐，差一人没到，我们就先点菜，饭店给力菜很快上齐了，我们等了会没忍住就先吃了，盘子全见底了那朋友还没来，服务员特勤快把空盘子全收了。这时正好朋友到了，他看看空荡荡的桌子，忙说真不好意思让你们饿着肚子等到现在，点菜吧！这顿我请！听了这话我们都没解释，默默地拿起菜单…<a href="https://www.51qianduan.com/">51前端</a></p>
	</div>
	<div class="cen1">极品100全力打造最具实力的前端动效</div>
	<span class="arr lef"></span>
	<span class="arr rig"></span>
</div>
<script type="text/javascript">
$(function(){
    $(".b").scrollable({
		size:1,
		items:".b ul",
		loop:true,
		next:".lef",
		prev:".rig",
		clickable:false,
		circular:true
	});  
    $(".b3").scrollable({
		size:1,
		items:".b3 ul",
		loop:true,
		next:".lef",
		prev:".rig",
		vertical:true,
		clickable:false,
		circular:true
	});  
})
</script>