循环滚动实例

前几天，所做项目要做一个循环滚动，滚动间隔5s。基本的效果是：移动到上面，滚动停止，鼠标移开，滚动继续。逻辑不复杂，主要是在时间的设定上有些麻烦。先把代码附在下面，希望可以抛砖引玉吧。

html如下：

<div class="tp_cont clearfix">
		<div class="tp_des">
			<div class="tp_recall " style="display: block;">
				<div class="tp_recallCont tp_onerow">
					<p class="tpc_1">途牛购票不错，第N次从途牛购票了，方</p>
					<p class="tp_date">2013-03-03</p>
					<span class="tp_arrow"></span>
				</div>
				<p class="tp_pers"><span class="per_icon"><label>于先生/女士 满意度</label><em class="f60">100%</em></span></p>
			</div>
			<div class="tp_recall" style="display: none;">
				<div class="tp_recallCont tp_onerow">
					<p class="tpc_1">我早上订的票，因为有事中午才到，开车去的，里面停车的地方挺多，</p>
					<p class="tp_date">2013-03-11</p>
					<span class="tp_arrow"></span>
				</div>
				<p class="tp_pers"><span class="per_icon"><label>赵先生/女士 满意度</label><em class="f60">100%</em></span></p>
			</div>
		</div>
	</div>

 

js代码如下：
$(function(){
		controllTime();
	});
	var scrollhander;
	var time = 50;  // 100  = 10s
	function  controllTime(){
		recallSH();
		$(".tp_recall").each(function(i){
			$(this).mouseover(function(){
				//停止循环
				clearInterval(scrollhander);
			});
			$(this).mouseout(function(){
				//restart循环
				recallSH();
			});
		});
	}
	//轮播
	function recallSH(){
		time --;
		if(time == 0){
			time = 70;
			//点评条数
			var remark = $(".tp_recall");
			//当前点评
			var flag = 0;
			for(var i = 0 ,l = remark.length ; i < l ; i++){
				if(remark.eq(i).css("display") == "block"){
					flag = i;
				}
			}
			//当前点评淡出，展示下一个点评
			if(l > 0){
				remark.eq(flag).fadeOut(1000,function(){
					var nextFlag =  flag == l - 1 ? 0:flag + 1;
					remark.eq(nextFlag).fadeIn(1000);
				});
			}
		}
		scrollhander = setTimeout("recallSH()",100);
	}