原生js轮播图

JavaScript

原生js

轮播图

 <script>
        // 1. 获取元素 ul spans lis
        var ul = document.getElementsByTagName('ul')[0];
        var spans = document.getElementsByTagName('span');
        var lis = document.getElementsByTagName('li');

        // 2. 不知道是第几张图 假设
        var n = 0;
        var liw = parseInt(getstyle(lis[0], 'width'));
        console.log(liw);

        // 3. 每隔3s
        var t = setInterval(auto, 3000);

        function auto(){
            // 0-->1-->2
            n++;
            // 3.1 判断 
            if(n == 5){ 
                n = 0;
                // 一瞬间拉回第一张
                ul.style.left = n * -liw + 'px';
                // 为了停留2个时长
                n = 1;
            };
            if(n == -1){
                n = 4;
                // 一瞬间拉回最后一张
                ul.style.left = n * -liw + 'px';
                n = 3;
            }
            // 4. 设置ul的left
            // ul.style.left = n * -liw + 'px';
            move(ul, 'left', 50, n * -liw);
            // 5. 改变span的样式
            // 5.1 清除所有的spans的样式
            for(var i = 0; i < spans.length; i++){
                spans[i].className = '';
            }
            // 5.2 指定下标的span 设置上样式 
            spans[n == 4 ? 0 : n].className = 'active';
        }

        // 划上清除
        var div = document.getElementsByTagName('div')[0];
        div.onmouseenter = function(){
            clearInterval(t);
        }
        // 划下重新开启
        div.onmouseleave = function () {
            t = setInterval(auto, 3000);
        };
        // 左箭头
        var btns = document.getElementsByTagName('button');
        btns[0].onclick = function () {
            n -= 2;
            auto();
        };
        // 右箭头
        btns[1].onclick = function () {
            auto();
        };

        // 小圆点
        for(var j = 0; j < spans.length; j++){
            spans[j].index = j;
            spans[j].onclick = function () {
                n = this.index - 1;
                auto();
            };
        }
    </script>