特效描述：文字连续 齿轮式滚动 图片展示。jquery文字连续齿轮式滚动图片展示特效代码下载
代码结构
1. 引入JS
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
2. HTML代码
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a{color:#666;text-decoration:none;}
a:hover{text-decoration:underline;}
.demobox{width:660px;margin:0 auto;padding:40px 0 0 0;}
/* do_ta */
.do_ta{border:1px solid #e4e4e4;font-size:12px;width:280px;float:left;margin:0 24px;display:inline;}
.do_ta .ta_ta{height:28px;line-height:28px;background:#F5F5F5;border-bottom:solid 1px #ddd;padding:0 10px;font-weight:800;font-size:12px;}
.do_ta .ta_tc{margin:10px;padding:0;line-height:20px;height:61px;overflow:hidden;}
.do_ta .ta_tc li{border-bottom:1px dashed #e4e4e4;padding:0;margin:0;color:#666;height:60px;overflow:hidden;}
.do_ta .ta_tc li p{line-height:30px;}
.do_ta .ta_tc li a{color:#1a69de;}
.do_ta .ta_tc li .time{color:#999;line-height:24px;}
.do_ta .ta_tc li .time a{color:#ff6600;font-weight:800;}
.do_ta .dota_d{text-align:center;padding:5px 0 15px 0;}
.do_ta .dota_d a{color:#666;text-decoration:underline;}
</style>
<div class="demobox">
<div class="do_ta" id="dota1">
<h2 class="ta_ta">节奏感十足的齿轮式的文字滚动</h2>
<ul class="ta_tc">
<li>
<p class="time"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
<p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
</li>
<li>
<p class="time"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
<p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
</li>
</ul>
<ul class="ta_tc">
<li>
<p class="time"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
<p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
</li>
<li>
<p class="time"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
<p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
</li>
</ul>
<ul class="ta_tc">
<li>
<p class="time"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
<p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
</li>
<li>
<p class="time"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
<p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
</li>
</ul>
<ul class="ta_tc">
<li>
<p class="time"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
<p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
</li>
<li>
<p class="time"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
<p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
</li>
</ul>
<div class="dota_d"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></div>
</div><!--do_ta end-->
<div class="do_ta" id="dota2">
<p class="ta_ta">节奏感十足的齿轮式的图片滚动</p>
<ul class="ta_tc">
<li><a href="http://www.51qianduan.com/"><img width="260" height="60" alt="jquery菜单特效 鼠标滑过菜单区域图标和文本类似flash动画酷炫移动展示" src="images/6.jpg" /></a></li>
<li><a href="http://www.51qianduan.com/"><img width="260" height="60" alt="jquery评论星星打分特效、鼠标滑过星星显示评论信息" src="images/23.jpg" /></a></li>
</ul>
<ul class="ta_tc">
<li><a href="http://www.51qianduan.com/"><img width="260" height="60" alt="jquery筛选器插件选项卡 css3制作一个漂亮的HTML5筛选容器插件选项卡" src="images/324.jpg" /></a></li>
<li><a href="http://www.51qianduan.com/"><img width="260" height="60" alt="基于jquery 选项卡插件jquery tab选项卡支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换等。" src="images/as1.jpg" /></a></li>
</ul>
<ul class="ta_tc">
<li><a href="http://www.51qianduan.com/"><img width="260" height="60" alt="jquery菜单特效 鼠标滑过菜单区域图标和文本类似flash动画酷炫移动展示" src="images/6.jpg" /></a></li>
<li><a href="http://www.51qianduan.com/"><img width="260" height="60" alt="jquery评论星星打分特效、鼠标滑过星星显示评论信息" src="images/23.jpg" /></a></li>
</ul>
<ul class="ta_tc">
<li><a href="http://www.51qianduan.com/"><img width="260" height="60" alt="jquery筛选器插件选项卡 css3制作一个漂亮的HTML5筛选容器插件选项卡" src="images/324.jpg" /></a></li>
<li><a href="http://www.51qianduan.com/"><img width="260" height="60" alt="基于jquery 选项卡插件jquery tab选项卡支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换等。" src="images/as1.jpg" /></a></li>
</ul>
<div class="dota_d"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></div>
</div><!--do_ta end-->
</div>
<script type="text/javascript">
/*新发布和中标信息滚动*/
(function(){
var dota1=$("#dota1"), dota2=$("#dota2"), ta_tc1=dota1.find("ul"), ta_tc2=dota2.find("ul");
if(dota1.size()==0 ||dota2.size()==0 ){return false;}
var scroll=function(uls){
//复制一次内部的li
var li_h=uls.eq(0).find("li").outerHeight();
this.copy=function(){
uls.each(function(){
var lis=$(this).find("li");
$(this).append(lis.clone());
$(this).attr("li_s",lis.size()*2);
$(this).attr("cur_li",lis.size()*2-1);
});
}
this.copy();
//移动到最下边的li
this.toLast=function(){
uls.each(function(){
$(this).scrollTop(10000);
});
}
this.toLast();
var timer=null;//滚动的超时时间
var i=0;
//开始滚动ul数组
function start(i)
{
var cur_ul=uls.eq(i);
if(cur_ul){
cur_ul.animate({scrollTop:cur_ul.scrollTop()-li_h},function(){
var cur_li=parseInt(cur_ul.attr("cur_li"));
var li_s=parseInt(cur_ul.attr("li_s"));
cur_li--;
if((li_s/2-1)==cur_li)
{
cur_ul.attr("cur_li",li_s-1);
$(this).scrollTop(10000);
}else{
cur_ul.attr("cur_li",cur_li);
}
start(++i);
});
};
}
timer=setInterval(function(){ start(i);},7000);
}
scroll(ta_tc1);
scroll(ta_tc2);
})();
</script>
