特效描述:图片文字滚动。jquery图片文字滚动多组图片文字间歇滚动插件
代码结构
1. 引入JS
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.rollGallery_yeso.js"></script>
2. HTML代码
<style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif,"宋体";} a{color:#333;text-decoration:none;} a:hover{color:#3366cc;text-decoration:underline;} /* demo */ .demo{width:686px;margin:40px auto;position:relative;} .demo h2{font-size:16px;height:44px;color:#3366cc;margin-top:20px;} .demo dl dt{font-size:14px;color:#ff6600;margin-top:40px;} .demo dl dt,.demo dl dd{line-height:22px;} /* scrollbox */ .scrollbox{position:relative;width:670px;height:146px;overflow:hidden;} .scrollbox ul{position:absolute;left:0px;top:0px;} .scrollbox li{float:left;width:670px;height:63px;overflow:hidden;padding:5px 0px;} .scrollbox li a{float:left;display:inline-block;width:156px;height:63px;overflow:hidden;margin-left:10px;} .scrollbox li a img{display:block;width:156px;height:63px;background:#eee;} /* leftlist */ #leftlist{width:999em;} /* fontlist */ #fontlist li{height:22px;line-height:22px;} #fontlist li a{width:auto;} </style> <div class="demo"> <h2>实例1、图片上下自动间歇滚动</h2> <div class="scrollbox"> <ul id="toplist"> <li> <a href="http://www.51qianduan.com/" target="_blank"><img src="images/1_20101216151249_pfmei.jpg" alt="三信国际电器(上海)有限公司" /></a> <a href="http://www.51qianduan.com/" target="_blank"><img src="images/1_20101216151244_u7pjn.jpg" alt="浙江龙盛集团有限公司" /></a> <a href="http://www.51qianduan.com/" target="_blank"><img src="images/1_20101216151211_keyxb.jpg" alt="浙江市下控股有限公司" /></a> <a href="http://www.51qianduan.com/" target="_blank"><img src="images/1_20101216151250_0jma3.jpg" alt="钱江摩托" /></a> </li> <li> <a href="http://www.51qianduan.com/" target="_blank"><img src="images/1_20101216151249_pfmei.jpg" alt="三信国际电器(上海)有限公司" /></a> <a href="http://www.51qianduan.com/" target="_blank"><img src="images/1_20101216151244_u7pjn.jpg" alt="浙江龙盛集团有限公司" /></a> <a href="http://www.51qianduan.com/" target="_blank"><img src="images/1_20101216151211_keyxb.jpg" alt="浙江市下控股有限公司" /></a> <a href="http://www.51qianduan.com/" target="_blank"><img src="images/1_20101216151250_0jma3.jpg" alt="钱江摩托" /></a> </li> <li> <a href="http://www.51qianduan.com/" target="_blank"><img src="images/1_20101216151249_pfmei.jpg" alt="三信国际电器(上海)有限公司" /></a> <a href="http://www.51qianduan.com/" target="_blank"><img src="images/1_20101216151244_u7pjn.jpg" alt="浙江龙盛集团有限公司" /></a> <a href="http://www.51qianduan.com/" target="_blank"><img src="images/1_20101216151211_keyxb.jpg" alt="浙江市下控股有限公司" /></a> <a href="http://www.51qianduan.com/" target="_blank"><img src="images/1_20101216151250_0jma3.jpg" alt="钱江摩托" /></a> </li> </ul> </div> <h2>实例2、图片左右自动间歇滚动</h2> <div class="scrollbox" style="height:73px;"> <ul id="leftlist"> <li> <a href="http://www.51qianduan.com/" target="_blank"><img src="images/1_20101216151249_pfmei.jpg" alt="三信国际电器(上海)有限公司" /></a> <a href="http://www.51qianduan.com/" target="_blank"><img src="images/1_20101216151244_u7pjn.jpg" alt="浙江龙盛集团有限公司" /></a> <a href="http://www.51qianduan.com/" target="_blank"><img src="images/1_20101216151211_keyxb.jpg" alt="浙江市下控股有限公司" /></a> <a href="http://www.51qianduan.com/" target="_blank"><img src="images/1_20101216151250_0jma3.jpg" alt="钱江摩托" /></a> </li> <li> <a href="http://www.51qianduan.com/" target="_blank"><img src="images/1_20101216151249_pfmei.jpg" alt="三信国际电器(上海)有限公司" /></a> <a href="http://www.51qianduan.com/" target="_blank"><img src="images/1_20101216151244_u7pjn.jpg" alt="浙江龙盛集团有限公司" /></a> <a href="http://www.51qianduan.com/" target="_blank"><img src="images/1_20101216151211_keyxb.jpg" alt="浙江市下控股有限公司" /></a> <a href="http://www.51qianduan.com/" target="_blank"><img src="images/1_20101216151250_0jma3.jpg" alt="钱江摩托" /></a> </li> <li> <a href="http://www.51qianduan.com/" target="_blank"><img src="images/1_20101216151249_pfmei.jpg" alt="三信国际电器(上海)有限公司" /></a> <a href="http://www.51qianduan.com/" target="_blank"><img src="images/1_20101216151244_u7pjn.jpg" alt="浙江龙盛集团有限公司" /></a> <a href="http://www.51qianduan.com/" target="_blank"><img src="images/1_20101216151211_keyxb.jpg" alt="浙江市下控股有限公司" /></a> <a href="http://www.51qianduan.com/" target="_blank"><img src="images/1_20101216151250_0jma3.jpg" alt="钱江摩托" /></a> </li> </ul> </div> <h2>实例3、文字上下自动间歇滚动</h2> <div class="scrollbox" style="height:64px;width:210px;"> <ul id="fontlist"> <li> <a href="http://www.51qianduan.com/" target="_blank">三信国际电器(上海)有限公司</a> </li> <li> <a href="http://www.51qianduan.com/" target="_blank">三信国际电器(上海)有限公司</a> </li> <li> <a href="http://www.51qianduan.com/" target="_blank">三信国际电器(上海)有限公司</a> </li> </ul> </div> <dl> <dt>应用说明:</dt> <dd>* 必须对包裹子元素的直接父元素应用该方法 <dd>* example: <pre> $("#picturewrap").rollGallery({ direction:"top", speed:2000, showNum:4, aniMethod:"easeOutCirc" }); </pre> </dd> <dd>* direction:移动方向。可取值为:"left" "top"</dd> <dd>* speed:速度。单位毫秒</dd> <dd>* noStep:设置为:true 则按非步进方式滚动。非步进下动画效果失效。</dd> <dd>* speedPx:非步进滚动下的移动速度。单位像素</dd> <dd>* showNum:显示个数。即父元素能容纳的子元素个数</dd> <dd>* rollNum:一次滚动的个数。注意总个数必须为rollNum的倍数!</dd> <dd>* aniSpeed:动画速度</dd> <dd>* aniMethod:动画方法(需插件(如:easing)支持)</dd> <dd>* childrenSel:子元素筛选器</dd> </dl> </div><!--tabbox end--> <script type="text/javascript"> $(document).ready(function($){ $("#toplist").rollGallery({ direction:"top", speed:2000, showNum:2 }); $("#leftlist").rollGallery({ direction:"left", speed:2000, showNum:1 }); $("#fontlist").rollGallery({ direction:"top", speed:2000, showNum:2 }); }); </script>