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