循环滚动实例

前几天，所做项目要做一个循环滚动，滚动间隔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);

	}