上下轮播 

 <!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>
</body>
<script src = "js/jquery-1.4.2.min.js"></script>
    <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的最后
        var totalHeight = $('.myDiv').height();//获取视口的高度
        var totalLi = Oli.height();//获取每个li的高度
        Oul.height(totalHeight);//把视口的高度
        function Tip(){
          Oul.stop().animate({
            top:-index*totalHeight//第一个li的top为0
          },400,function(){
            clickEndFlag = true;
            if(index == Oli.length){
              Oul.css({top:0});//将top设置为0,从第一个li开始
              index = 0;
            }
          })
        }
        function next(){
          index++;
          if(index > Oli.length){
            index = 0;
          }
          Tip();
        };
        function prev(){
          index--;
          if(index < 0){
            index = Oli.length-1;
            Oul.css('top','-Oli.length*totalHeight');
          }
          Tip();
        };
        //下一条
        $('.gt').click(function(){
          if(clickEndFlag){
            next();
            clickEndFlag = false;
          }
        });
        $('.lt').click(function(){
          if(clickEndFlag){
            prev();
            clickEndFlag = false;
          }
        });
        //自动
        timer = setInterval(next,1000);
        //鼠标悬停
        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>
</html>

 

posted @ 2017-01-19 10:23  TTTK  阅读(199)  评论(0)    收藏  举报