完整轮播图 | 易学教程

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

        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        .screen {
            width: 500px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }

        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 3000px;
        }

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

        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }

        .all ol li.current {
            background: #DB192A;
        }

        #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 class="all" id='box'>
    <div class="screen"><!--相框-->
        <ul>
            <li><img src="images1/1.jpg" width="500" height="200"/></li>
            <li><img src="images1/2.jpg" width="500" height="200"/></li>
            <li><img src="images1/3.jpg" width="500" height="200"/></li>
            <li><img src="images1/4.jpg" width="500" height="200"/></li>
            <li><img src="images1/5.jpg" width="500" height="200"/></li>
        </ul>
        <ol>
        </ol>
    </div>
    <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>
<script src="common.js"></script>
<script>
    var box = my$("box");
    var screen = box.children[0];
    var wid = screen.offsetWidth;
    var ulObj = screen.children[0];
    var olObj = screen.children[1];
    var list = ulObj.children;
    var pic = 0;
    for (var i = 0; i < list.length; i++) {
        var liObj = document.createElement("li");
        liObj.setAttribute("index", i);
        liObj.innerText = i + 1;
        olObj.appendChild(liObj);
        olObj.children[0].className = "current";
        liObj.onmouseover = function f1() {
            //j的范围
            for (var j = 0; j < olObj.children.length; j++) {
                olObj.children[j].className = "";
                //用的是this噢噢噢噢
                pic = this.getAttribute("index");
                animate(ulObj, -pic * wid);
            }
            this.className = "current";
        };
    }
    //自动
    var timer=setInterval(clickHandle,1000);
    //左右焦点轮播图：
    box.onmouseover = function () {
        my$("arr").style.display = "block";
        clearInterval(timer);
    };
    box.onmouseout = function () {
        my$("arr").style.display = "none";
        timer=setInterval(clickHandle,1000);
    };
    ulObj.appendChild(ulObj.children[0].cloneNode(true));
    //右边按钮
    my$("right").onclick =clickHandle;
        function clickHandle() {
        if (pic == list.length - 1) {
            pic = 0;
            ulObj.style.left = pic + "px";
        }
        pic++;
        animate(ulObj, -pic * wid);
        if (pic == list.length - 1) {
            olObj.children[olObj.children.length - 1].className = "";
            olObj.children[0].className = "current";
        } else {
            for (var j = 0; j < olObj.children.length; j++) {
                olObj.children[j].className = "";
            }
            olObj.children[pic].className = "current";
        }
    }
    //左边按钮
    my$("left").onclick = function () {
        if (pic == 0) {
            pic = 5;
            ulObj.style.left = -pic * wid + "px";
        }
        pic--;
        animate(ulObj, -pic * wid);
        for (var j = 0; j < olObj.children.length; j++) {
            olObj.children[j].className = "";
        }
        olObj.children[pic].className = "current";
    };
    function animate(element, target) {
        clearInterval(element.timer);
        element.timer = setInterval(function () {
            var current = element.offsetLeft;
            var step = 10;
            step = current < target ? step : -step;
            current += step;
            if (Math.abs(current - target) > Math.abs(step)) {
                element.style.left = target + "px";
            } else {
                clearInterval(element.timer);
                element.style.left = target + "px";
            }
        }, 100);
    }
</script>
</body>
</html>
来源：CSDN
作者：天马行空zqzq
链接：https://blog.csdn.net/qq_42039912/article/details/104738297
标签
pic
轮播