特效描述:基于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>