循环滚动实例

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

 

转载于:https://www.cnblogs.com/junxizai/archive/2013/03/27/2984388.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值