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



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

135 539 180



特效描述:基于jQuery实现 图片可控制 滚动特效。基于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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到