js_picture_carousel
/
轮播练习.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        #box {

            height: 400px;
            border:#ccc 1px solid;
            padding: 9px;
            margin: 50px 0;
        }

        #inner {
            margin: 0;
            height: 400px;
            position: relative;
            overflow: hidden;
        }

        #inner .trans {
            width: 1000%;
            list-style: none;
            margin: 0px;
            padding: 0px;
            position: absolute;
        }

        #inner li {
            float: left;
        }

        #inner img {
            width: auto;
            height: 400px;
        }

        .arr span {
            display: block;
            position: absolute;
            width: 60px;
            height: 100px;
            background-color:#fff;
            opacity: 0.3;
            top: 35%;
            line-height: 100px;
            text-align: center;
            font-size: 36px;
            color: rgb(149, 148, 150);
            cursor: pointer;
            user-select: none;
        }

        .arr .ls {
            left: 0px;
        }

        .arr .rs {
            right: 0px;
        }

        #inner .rect {
            list-style: none;
            width: 260px;
            text-align: center;
            margin: 360px auto 0px;
        }

        .rect li {
            width: 30px;
            height: 30px;
            line-height: 30px;
            background-color: #fff;
            opacity: 0.5;
            margin-left: 10px;
            text-align: center;
            cursor: pointer;
        }

        .rect .current {
            background-color: #f40;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="inner">
            <ul class="trans">
                <li>
                    <a href=" "><img src="images/1.jpeg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/2.jpeg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/3.jpeg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/4.jpeg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/5.jpeg" alt=""></a>
                </li>
            </ul>
            <div class="arr">
                <span class="ls"><</span> <span class="rs">>
                </span>
            </div>
            <ul class="rect">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
    </div>
</body>
<script>
    var ulobj = document.getElementById('inner').children[0];
    var ind = 0;
    var box=document.getElementById('box');
    var imgWidth =window.innerWidth;
    var trans=document.getElementsByClassName('trans')[0];
    var inner=document.getElementById('inner');
    var timeInterval;
    // 获取左右按钮
    var btnL = document.getElementsByClassName('ls')[0];
    var btnR = document.getElementsByClassName('rs')[0];
    // 轮播时间
    var time=3000;
    // 导航按钮列表
    var rect = document.getElementsByClassName('rect')[0];
    // 轮播方向
    var dir = "left";
    // 将复制第一个元素，将复制的元素添加到末尾
    ulobj.appendChild(ulobj.children[0].cloneNode(true));
    var linum = ulobj.children.length;

    // 窗口改变
    resize();
    addEvent(window,'resize',resize);
    function resize(){
        resetInterval();
        move();
        imgWidth=window.innerWidth;
        box.style.width=imgWidth-20+"px";
        inner.style.width=imgWidth-20+'px';
        for (let index = 0; index < trans.children.length; index++) {
            const li = trans.children[index];
            var img=li.children[0].children[0];
            img.style.width=imgWidth+'px';
        }
    }

    function resetInterval(){
        clearInterval(timeInterval);
        timeInterval = setInterval(move, time);
    }

    // 给导航按钮设置一个属性值，方便后期判断
    var releg = rect.children.length;
    for (var i = 0; i < releg; i++) {
        rect.children[i].setAttribute('num', i);
    }
    // 左按钮事件
    addEvent(btnL,'click',function () {
        dir = 'left';
        move();
        resetInterval();
    })
    // 右按钮事件
    addEvent(btnR,'click',function () {
        dir = "right";
        move();
        resetInterval();
    })

    // 导航按钮点击移动
    addEvent(rect,'click',function (e) {
        console.log(e.target.getAttribute('num'));
        ind = e.target.getAttribute('num');
        go();
        resetInterval();
    })

    // 轮播
    function move() {
        if (dir == 'left') {
            moveLeft();
        }
        else {
            moveRight();
        }
    }
    // 左移动
    function moveLeft() {
        console.log(ind, linum - 1);
        if (ind == linum - 1) {
            ulobj.style.left = '0px';
            ind = 0;
        }
        ind++;
        go();
    }
    // 右移动
    function moveRight() {
        console.log(ind, linum - 1);
        if (ind == 0) {
            ulobj.style.left = -(linum - 1) * imgWidth + 'px';
            ind = linum - 1;
        }
        ind--;
        go();
    }
    function go() {
        setRect(ind);
        animation(ulobj, -ind * imgWidth);
    }
    // 设置方块样式变化
    function setRect(index) {
        if (index == linum - 1) {
            index = 0;
        }
        for (var i = 0; i < releg; i++) {
            rect.children[i].removeAttribute("class")
        }
        rect.children[index].className = "current";
    }
    // 移动方法
    function animation(obj, target) {
        clearInterval(obj.timeId)
        obj.timeId = setInterval(function () {
            curr = parseInt(getStyle(obj, 'left'));
            obj.style.left = curr + (target - curr) / 5 + 'px';
            if (Math.abs(parseInt(obj.style.left) - target) < 5) {
                clearInterval(obj.timeId)
                obj.style.left = target + 'px';
                // console.log(target + 'px');
            }
        }, 10)
    }
    // 获取样式，兼容
    function getStyle(elem, prop) {
        return window.getComputedStyle ? window.getComputedStyle(elem, null)[prop] : elem.currentStyle[prop];
    }
    // 添加事件监听，兼容
    function addEvent(elem,prop,callBack) {
        elem.attchEvent ? elem.attchEvent('on'+prop,callBack) : elem.addEventListener(prop,callBack,false)
    }
</script>

</html>