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>