仿淘宝轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
            list-style-type: none;
        }

        #box {
            width: 790px;
            height: 340px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        #screen {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }

        #ul {
            width: 1000%;
            position: absolute;
            top: 0;
            left: 0;
        }

        #ul li {
            float: left;
        }

        #ol {
            position: absolute;
            bottom: 10px;
            right: 10px;
            line-height: 20px;
            text-align: center;
        }

        #ol span {
            display: inline-block;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }

        #ol span.current {
            background: #DB192A;
            color: #fff;
        }

        #arr {
            display: none;
        }

        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }

        #arr #right {
            right: 5px;
            left: auto;
        }

    </style>
</head>
<body>
<div id="box">
    <div id="screen">
        <ul id="ul">
            <li>
                <img src="img/1.jpg" alt="">
            </li>
            <li>
                <img src="img/2.jpg" alt="">
            </li>
            <li>
                <img src="img/3.jpg" alt="">
            </li>
            <li>
                <img src="img/4.jpg" alt="">
            </li>
            <li>
                <img src="img/5.jpg" alt="">
            </li>
        </ul>
        <div id="ol">
        </div>
    </div>
    <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>

</div>
<script src="Move.js"></script>
<script !src="">
    // 获取id函数
    function $(id) {
        return document.getElementById(id);
    }
    // 获取非行间样式函数
    function getStyle(obj, name) {
        if (obj.currentStyle) {
            return obj.currentStyle[name];
        } else {
            return getComputedStyle(obj, null)[name];
        }
    }
    // 缓动动画函数
    function Move(obj, json, fn) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var stop = true;
            for (var arr in json) {
                var offsetValue = arr == 'opacity' ? Math.round(parseFloat(getStyle(obj, arr)) * 100) : parseInt(getStyle(obj, arr));
                var target = parseInt(json[arr]);
                var speed = (target - offsetValue) / 10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if (target != offsetValue) {
                    stop = false;
                }
                if (arr == 'opacity') {
                    obj.style.opacity = (offsetValue + speed) / 100;
                    obj.style.filter = "alpha(opacity=" + offsetValue + speed + ")";
                }

                offsetValue += speed;
                obj.style[arr] = offsetValue + 'px';
            }
            if (stop) {
                clearInterval(obj.timer);
                if (fn) {
                    fn();
                }
            }
        }, 20)
    }
    
    
    // 获取需要的元素
    var box = $('box');
    var screen = $('screen');
    var ul = $('ul');
    var ol = $('ol');
    var arr = $('arr');
    var left = $('left');
    var right = $('right');
    var lis = $('ul').children;
    // 获取包裹元素宽度
    var imgWidth = screen.offsetWidth;

    //
    var index = 0;
    var timer = null;

    for (var i = 0; i < lis.length; i++) {
        // 动态创建索引
        var spans = document.createElement('span');
        ol.appendChild(spans);
        spans.innerHTML = i + 1;
        spans.setAttribute('data-index', i);

        spans.onmouseover = function () {
            // 遍历索引，先全部移除class，再对应添加
            for (var j = 0; j < ol.children.length; j++) {
                ol.children[j].removeAttribute('class');
            }
            this.setAttribute('class', 'current');
            index = this.getAttribute('data-index');
            Move(ul, {
                'left': -index * imgWidth
            })
        }
    }

    ol.children[0].setAttribute('class', 'current');
    // 克隆第一个li追加到ul尾部
    var firstLi = ul.children[0].cloneNode(true);
    ul.appendChild(firstLi);
    // 显示隐藏 < >
    box.onmouseover = function () {
        arr.style.display = 'block';
        clearInterval(timer);
    }

    box.onmouseout = function () {
        arr.style.display = 'none';
        timer = setInterval(autoPlay, 2000);
    }
    // 自动循环轮播
    timer = setInterval(autoPlay, 2000);

    right.onclick = autoPlay;

    function autoPlay() {
        // 轮播到本应展示的最后一张时（对应li的倒数第二张），让index为0（第一张），且left值为0
        if (index == lis.length - 1) {
            index = 0;
            ul.style.left = 0 + 'px';
        }
        index++;
        Move(ul, {
            'left': -index * imgWidth
        })
        // 根据index，使对应索引变色
        if (index == lis.length - 1) {
            ol.children[ol.children.length - 1].removeAttribute('class');
            ol.children[0].className = 'current';
        } else {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].removeAttribute('class');
            }
            ol.children[index].setAttribute('class', 'current');
        }
    }

    left.onclick = function () {
        // 第一张时，index == 本应展示的最后一张（对应li的倒数第二张）
        if (index == 0) {
            index = lis.length - 1;
            ul.style.left = -index * imgWidth + 'px';
        }
        index--;
        Move(ul, {
            'left': -index * imgWidth
        })

        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].removeAttribute('class');
        }
        ol.children[index].setAttribute('class', 'current');

    }

</script>
</body>
</html>
posted @ 2018-12-03 09:11 Sky_Ice 阅读(285) 评论(0) 收藏举报
刷新页面返回顶部
Sky_Ice

仿淘宝轮播图

公告
