完整轮播图案例 - 码农教程

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

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

        ul,
        ol {
            list-style: none;
        }

        .carousel {
            position: relative;
            width: 880px;
            height: 550px;
            margin: 50px auto;
        }

        .pic li {
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }

        .pic li.current {
            display: block;
        }

        .btn a {
            position: absolute;
            top: 50%;
            margin-top: -40px;
            display: block;
            width: 80px;
            height: 80px;
            background-color: rgba(255, 255, 255, 0.3);
            text-decoration: none;
            text-align: center;
            font-size: 60px;
            line-height: 80px;
            color: #444;
            font-family: "SimSun";
        }

        .btn .left {
            left: 10px;
        }

        .btn .right {
            right: 10px;
        }

        .btn a:hover {
            background-color: rgba(255, 255, 255, 0.5);
        }

        .sub {
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -100px;
            display: block;
            width: 200px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 20px;
        }

        .sub li {
            float: left;
            margin: 10px;
            display: block;
            width: 20px;
            height: 20px;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
        }

        .sub li.current {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="carousel" id="carousel">
        <ul class="pic" id="pic">
            <li class="current"><a href=""><img src="images/lunbo/01.jpg" alt=""></a></li>
            <li><a href=""><img src="images/lunbo/02.jpg" alt=""></a></li>
            <li><a href=""><img src="images/lunbo/03.jpg" alt=""></a></li>
            <li><a href=""><img src="images/lunbo/04.jpg" alt=""></a></li>
            <li><a href=""><img src="images/lunbo/05.jpg" alt=""></a></li>
        </ul>

        <div class="btn">
            <a href="javascript:void(0);" class="left" id="left">&lt;</a>
            <a href="javascript:void(0);" class="right" id="right">&gt;</a>
        </div>

        <ol class="sub" id="sub">
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>


</body>
<script>
    var carousel = document.getElementById("carousel");
    var left = document.getElementById("left");
    var right = document.getElementById("right");
    var pic = document.getElementById("pic");
    var ulLis = pic.children;
    var sub = document.getElementById("sub");
    var olLis = sub.children;

    //信号量编程
    //通过一个全局变量的信号量, 在不同的事件函数中进行信息传递

    //全局信号量, 存储的是要展示的图片所在的li的下标
    var idx = 0;

    right.onclick = function () {
        rightHandel();
    };

    left.onclick = function () {
        idx--;
        if (idx < 0) {
            idx = ulLis.length - 1;
        }

        //切换函数
        change();
    };


    //点击小圆点
    for(var i = 0; i<olLis.length;i++){

        //绑定下标
        olLis[i].index = i;

        olLis[i].onclick = function(){
            idx = this.index;
            change();
        }
    }


    var timer;
    //自动播放
    timer = setInterval(rightHandel,2000);


    carousel.onmouseover = function(){
        clearInterval(timer);
    }

    carousel.onmouseout = function(){
        timer = setInterval(rightHandel,2000);
    }


    //右按钮事件函数
    function rightHandel(){
        idx++;
        if (idx > ulLis.length - 1) {
            idx = 0;
        }
        change();
    }

    //切换函数
    function change() {
        //排他思想
        //对应控制
        for (var i = 0; i < ulLis.length; i++) {
            ulLis[i].className = "";
            olLis[i].className = "";
        }
        ulLis[idx].className = "current";
        olLis[idx].className = "current";
    }
</script>

</html>
原文地址：https://www.cnblogs.com/charonmomo/p/15152928.html