基于jQuery实现图片可控制滚动特效

代码结构

1. 引入JS

<script src="js/MSClass.js" type="text/javascript"></script>

2. HTML代码

<br><br>
<div id="wrapper">
<div id="LeftButton"></div>
<div id="CSSBox">
	<ul id="CSSContent">
  		<li><a href="http://www.51qianduan.com/" target="_blank"><img src="images/img01.jpg" width="150" height="120" title="扁平化图标"/></a><span><a href="http://www.51qianduan.com/" target="_blank">圣诞扁平化01</a></span></li>
  		<li><a href="http://www.51qianduan.com/" target="_blank"><img src="images/img02.jpg"  width="150" height="120" title="扁平化图标"/></a><span><a href="http://www.51qianduan.com/" target="_blank">圣诞扁平化02</a></span></li>
 		<li><a href="http://www.51qianduan.com/" target="_blank"><img src="images/img03.jpg"  width="150" height="120" title="扁平化图标"/></a><span><a href="http://www.51qianduan.com/" target="_blank">圣诞扁平化03</a></span></li>
  		<li><a href="http://www.51qianduan.com/" target="_blank"><img src="images/img04.jpg"  width="150" height="120" title="扁平化图标"/></a><span><a href="http://www.51qianduan.com/" target="_blank">圣诞扁平化04</a></span></li>
	</ul>
</div>
<div id="RightButton"></div>
</div>
<div style="clear:both"></div>
<div id="wrapper2">
<div id="LeftButton2"></div>
<div id="CSSBox2">
	<ul id="CSSContent2">
  		<li><a href="http://www.51qianduan.com/" target="_blank"><img src="images/pic01.jpg" width="150" height="120" title="可爱牛图标01"/></a><span><a href="http://www.51qianduan.com/" target="_blank">可爱牛图标01</a></span></li>
  		<li><a href="http://www.51qianduan.com/" target="_blank"><img src="images/pic02.jpg"  width="150" height="120" title="可爱牛图标02"/></a><span><a href="http://www.51qianduan.com/" target="_blank">可爱牛图标02</a></span></li>
 		<li><a href="http://www.51qianduan.com/" target="_blank"><img src="images/pic03.jpg"  width="150" height="120" title="可爱牛图标03"/></a><span><a href="http://www.51qianduan.com/" target="_blank">可爱牛图标03</a></span></li>
  		<li><a href="http://www.51qianduan.com/" target="_blank"><img src="images/pic04.jpg"  width="150" height="120" title="可爱牛图标04"/></a><span><a href="http://www.51qianduan.com/" target="_blank">可爱牛图标04</a></span></li>
	</ul>
</div>
<div id="RightButton2"></div>
</div>
<script type="text/javascript">
new Marquee(
{
	MSClass	  : ["CSSBox","CSSContent"],
	Direction : 2,
	PrevBtnID : "LeftButton",
	NextBtnID : "RightButton",
	Step	  : 0.3,
	Width	  : 510,
	Height	  : 180,
	Timer	  : 20,
	DelayTime : 3000,
	WaitTime  : 3,
	ScrollStep: 170,
	SwitchType: 0,
	AutoStart : true
});
</script>
<script type="text/javascript">
new Marquee(
{
	MSClass	  : ["CSSBox2","CSSContent2"],
	Direction : 2,
	PrevBtnID : "LeftButton2",
	NextBtnID : "RightButton2",
	Step	  : 0.3,
	Width	  : 510,
	Height	  : 180,
	Timer	  : 20,
	DelayTime : 3000,
	WaitTime  : 3,
	ScrollStep: 170,
	SwitchType: 0,
	AutoStart : true
});
</script>
</div>
<div style="clear:both;text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>