上下轮播（新闻滚动词条）

 <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title></title>
    <style>
        .myDiv{
            width:300px;height:40px;overflow: hidden;border:1px solid red;
        }
        ul{
            list-style:none;
            position: relative;
            top:0;
        }
        ul li{
            height:40px;
            cursor: pointer;
        }
        span{
            font-size:20px;
            line-height:50px;
            position: relative;
            left:250px;
            top:-45px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="myDiv">
        <ul>
            <li>1.新闻标题一</li>
            <li>2.新闻标题二</li>
            <li>3.新闻标题三</li>
            <li>4.新闻标题四</li>
            <li>5.新闻标题五</li>
        </ul>
    </div>
    <span class="lt">&lt;</span>
    <span class="gt">&gt;</span>
    <script>
       $(function(){
           var timer=null;//初始化定时器函数
           var index=0;
           var Oul=$("ul");
           var Oli=$("ul li");
           var clickEndFlag = true;//上一条走完才为true
           Oli.eq(0).clone(true).appendTo(Oul);//克隆第一个li放到ul的最后
//           console.log(Oli.length);//5
//           console.log($("ul li").length);//6
           var totalHeight=$(".myDiv").height();//获取到视口的高度
           var totalLi=Oli.height();//获取每个li的高度
           Oul.height(totalHeight);//把视口的高度赋值给ul

           function tab(){
               Oul.stop().animate({
                   top: -index * totalHeight//第一个li的top为0;第二个li的top为第一个li的高度的负值,第三个li的top为前两个li高度的负值,以此类推
               },400,function(){
                    clickEndFlag = true;
                    if(index==Oli.length){//到最后一个li
                        Oul.css({top:0});//将top设置为0,从第一个li开始
                        index=0;
                    }
               })
           }
           function next(){
               index++;
               if(index>Oli.length){
                   index=0;
               }
               tab();
           }
           function prev(){
               index--;
               if(index<0){
                   index=Oli.size()-1;
                   Oul.css("top",-Oli.size()*totalHeight);
               }
               tab();
           }

           //下一条
           $("body").find(".gt").on("click",function(){
                if(clickEndFlag){
                    next();
                    clickEndFlag=false;
                }
           });
           //上一条
           $("body").find(".lt").on("click",function(){
               if(clickEndFlag){
                   prev();
                   clickEndFlag=false;
               }
           })
           //自动轮播
           timer=setInterval(next,1000);

           //鼠标悬浮到每个li上时清除定时器
           Oli.hover(function(){
               clearInterval(timer);
           },function(){
               timer=setInterval(next,1000);
           });

           //鼠标悬浮到切换按钮上时,清除定时器
           $('.gt').hover(function(){
               clearInterval(timer);
           },function(){
               timer=setInterval(next,1000);
           });
           $('.lt').hover(function(){
               clearInterval(timer);
           },function(){
               timer=setInterval(next,1000);
           })
       })
    </script>
</body>
</html>
posted @ 2017-01-18 10:30 TTTK 阅读(482) 评论(0) 收藏举报
TTTK

上下轮播（新闻滚动词条）

公告
