前端学习笔记day15 webAPI ----轮播图实现 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src='animation.js'></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        ol {
            list-style: none;
        }
        #box {
            width: 500px;
            height: 200px;
            border: 1px solid grey;
            margin-left: 500px;
            margin-top: 200px;
            position: relative;
            box-sizing: border-box;
            overflow: hidden;
        }
        #img {
            height: 200px;
            width: 3000px;
            position: absolute;
        }    
        #img img {
            width: 500px;
            float: left;
        }
        #img img:first-child {
            z-index: 1;
        }
        .current {
            background-color: yellow;
        }
        #arrow_l,#arrow_r {
            width: 30px;
            height: 30px;
            background: rgba(255,255,255,0.3);
            text-align: center;
            font-size: 30px;
            line-height: 30px;
            position: absolute;
            top: 85px;
            left: 0px;
            display: none;
        }
        #arrow_r {
            left: 467px;
        }
        ol {
            position: absolute;
            bottom: 17px;
            right: 20px;
            z-index: 2;
        }
        ol li {
            width: 22px;
            height: 22px;
            background-color: #fff;
            margin: 5px;
            float: left;
            text-align: center;
            line-height: 24px;

        
        }
        
    </style>
</head>
<body>
    <div id='box'>
        <div id='img'>
            <img src="images/wf1.jpg" alt="">
            <img src="images/wf2.jpg" alt="">
            <img src="images/wf3.jpg" alt="">
            <img src="images/wf4.jpg" alt="">
            <img src="images/wf5.jpg" alt="">    
        </div>
        <div id='arrow_l'><</div>
        <div id='arrow_r'>></div>
        <ol>
            
        </ol>
        
    </div>

    <script>
        var box = document.getElementById('box');
        var imgBox = document.getElementById('img');
        var imgWidth = imgBox.children[0].offsetWidth;
        var ol = box.getElementsByTagName('ol')[0];
        var num = imgBox.children.length;
        var arrow_l = document.getElementById('arrow_l');
        var arrow_r = document.getElementById('arrow_r');
        var timeId;
        for(var i = 0;i < num;i++) {
            var li = document.createElement('li');
            li.innerText = i + 1;
            ol.appendChild(li);
            if(i===0) {
                li.className = 'current';
            }
            li.index = i;  
            li.onclick = liClick;
            
            
        }
        function liClick() {
            if(this.index < num) {
                animation(imgBox,-this.index*imgWidth);
            }
            for(var i = 0;i < num;i++) {
                ol.children[i].className = '';
            }
            this.className = 'current';
            liIndex = this.index;
        }
        box.onmousemove = function() {
            arrow_l.style.display = 'block';
            arrow_r.style.display = 'block';
            clearInterval(timeId);
            timeId = null;
        }
        box.onmouseout = function() {
            arrow_l.style.display = '';
            arrow_r.style.display = '';
            timeId = setInterval(function() {
                rightClick();
            },1000)
        }
        arrow_l.onclick = leftClick;
        arrow_r.onclick = rightClick;
        var image = imgBox.children[0].cloneNode(true);
        imgBox.appendChild(image);
        var liIndex = 0;
        function rightClick() {
            if(liIndex===num) {
                imgBox.style.left = '0px';
                liIndex = 0;
            }
            liIndex+=1;
            if(liIndex < num) {
                ol.children[liIndex].click();
            }else {
                animation(imgBox,-liIndex*imgWidth);
                for(var i = 0;i < num;i++) {
                    ol.children[i].className = '';
                }
                ol.children[0].className = 'current'; 
            }
        }
        function leftClick() {
            if(liIndex===0) {
                liIndex = num;
                imgBox.style.left = -liIndex*imgWidth + 'px';
            }
            liIndex -=1;
            ol.children[liIndex].click();
        }    
        timeId = setInterval(function() {
            rightClick();
        },1000)
    </script>
</body>
</html>
function animation(element,target) {

    var step = 10;
    if(element.timeId) {
        clearInterval(element.timeId);
        element.timeId = null;
    }
    element.timeId = setInterval(function() {
        if(element.offsetLeft > target) {
            step = -Math.abs(step);
            
        }
        if(Math.abs(target - element.offsetLeft) < Math.abs(step)){
            element.style.left = target + 'px';
            clearInterval(element.timeId);
        }else {
            element.style.left =  element.offsetLeft + step + 'px';
        }
    },3)
}

运行结果：

 

posted @ 2019-01-09 15:42  写的BUG代码少  阅读(146)  评论(0)  编辑  收藏  举报