上下輪播

時間 2019-12-06
標籤上下简体版
原文原文鏈接
 <!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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。