js 輪播圖

時間 2019-11-13
原文原文鏈接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        img{vertical-align: top;}
        .box{width: 500px;height: 200px;border: 1px solid #ccc;margin: 100px auto;padding: 7px;position: relative;}
        .box li{list-style: none;}
        .screen{width: 500px;height:200px;position: relative;overflow: hidden;}
        .screen ul{position: absolute;width: 3000px;left: 0;top:0;}
        .screen li{float: left;overflow: hidden;}
        .box ol{position: absolute;right: 10px;bottom:10px;line-height: 20px;text-align: center;}
        .box ol li{width: 20px;height: 20px;float: left;background: white;border: 1px solid #ccc;cursor:pointer;margin-left: 10px;}
        .box ol li.current{background:yellow;}
    </style>
    <script type="text/javascript">
        window.onload = function() {
            var box = document.getElementById('box');
            var ul = document.getElementById('ul');
            var ullis = ul.children; //獲取ul下的全部子節點
            ul.appendChild(ul.children[0].cloneNode(true));//克隆第一個節點到並追加到最後
            var ol = document.createElement('ol'); //建立ol節點
            box.appendChild(ol); //追加到box節點後面
            for(var i=0;i<ullis.length-1;i++) { //動態生成小方塊
                var li = document.createElement('li');
                li.innerHTML = i+1;//給li 加文字
                ol.appendChild(li);
            }
            ol.children[0].className = 'current'; //默認第一個選中
            var ollis = ol.children; //獲取ol下全部子節點
            //動畫部分
            for (var i=0;i<ollis.length;i++) {
                ollis[i].index = i;//得到當前第幾個小li的索引號
                ollis[i].onmouseover = function() { //鼠標放上選當前小方塊
                    for (var j=0;j<ollis.length;j++) {
                        ollis[j].className = '';
                    }
                    this.className = 'current';
                    animate(ul,-this.index*500);//參數1,誰動畫,2走多少
                    //當前索引號爲主
                    square = key = this.index;
                }
            }
            var timer = null;
            var key = 0;
            var square = 0;
            timer = setInterval(autoplay,1000);
            function autoplay(){
                key++;//先++
                if (key>ullis.length - 1) { //後判斷
                    ul.style.left = 0; //迅速調回
                    key = 1; //由於第6張就是第一張 全部下次從第2張開始
                }
                animate(ul,-key*500);//再次執行
                square++;
                if (square>ollis.length - 1) {
                    square = 0;
                }
                for (var i=0;i<ollis.length;i++) {
                    ollis[i].className = '';
                }
                ollis[square].className = 'current';
            }
            //鼠標通過中止定時器
            box.onmouseover = function() {
                clearInterval(timer);
            }
            box.onmouseout = function() {
                timer = setInterval(autoplay,1000);
            }
        }
        function animate(obj,target) {
            clearInterval(obj.timer); //先清楚定時器
            var speed = obj.offsetLeft < target ? 15 : -15;//用來判斷 加 仍是 減
            obj.timer = setInterval(function(){
                var result = target - obj.offsetLeft;//由於他們的差值不會超過5
                obj.style.left = obj.offsetLeft + speed + 'px';
                //若是差值不小於15說明到位置了
                if (Math.abs(result)<=15) {
                    clearInterval(obj.timer);
                    //有5像素差,直接跳目標位置
                    obj.style.left = target + 'px';
                }
            },30)
        }
    </script>
</head>
<body>
    <div class="box" id='box'>
    <div class="screen">
        <ul id="ul">
            <li><img src="./img/1.jpg" width="500" height="200" /></li>
            <li><img src="./img/2.jpg" width="500" height="200" /></li>
            <li><img src="./img/3.jpg" width="500" height="200" /></li>
            <li><img src="./img/4.jpg" width="500" height="200" /></li>
            <li><img src="./img/5.jpg" width="500" height="200" /></li>
        </ul>
    </div>
</div>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。