html+css+jquery实现轮播图自动切换、左右切换、点击切换

pc端也好、移动端也好，轮播图很常见，今天用html+css+jquery实现小米商城轮播图，套UI框架更容易实现

在这里插入图片描述

步骤1：把静态轮播图用div+css布局出来，采用盒子模型、相对绝对定位实现

代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            height: 460px;
            width: 1000px;
            position: relative;
        }

        .box-img {
            position: absolute;
            left: 0;
            top: 0;
        }

        .box-img img {
            height: 460px;
            width: 1000px;
        }

        /*左右切换*/
        .box-left {
            position: absolute;
            left: 0;
            top: 195px;
            width: 35px;
            height: 70px;
            border-radius: 0 5px 5px 0;
            text-align: center;
            line-height: 70px;
            font-size: 27px;
            color: #b0afad;
        }

        .box-left:hover {
            background-color: #777777;
            color: #ffffff;
        }

        .box-right {
            position: absolute;
            right: 0;
            top: 195px;
            width: 35px;
            height: 70px;
            border-radius: 5px 0 0 5px;
            text-align: center;
            line-height: 70px;
            font-size: 27px;
            color: #b0afad;
        }

        .box-right:hover {
            background-color: #777777;
            color: #ffffff;
        }

        /*圆点*/
        .box-dot {
            position: absolute;
            right: 50px;
            bottom: 20px;
        }

        .box-dot ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .box-dot ul li {
            width: 14px;
            height: 14px;
            border-radius: 100%;
            background-color: #4a5460;
            float: left;
            margin-right: 10px;
        }

        .box-dot ul li:hover, .box-dot ul li:nth-child(1) {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="box">
    <!-- 轮播图 -->
    <div class="box-img"><img src="static/image/1.jpg"></div>
    <div class="box-img"><img src="static/image/2.jpg"></div>
    <div class="box-img"><img src="static/image/6.jpg"></div>
    <div class="box-img"><img src="static/image/4.jpg"></div>
    <div class="box-img"><img src="static/image/5.jpg"></div>
    <div class="box-img"><img src="static/image/3.jpg"></div>
    <!-- 左右切换 -->
    <div class="box-left">&lt;</div>
    <div class="box-right">&gt;</div>
    <!-- 圆点 -->
    <div class="box-dot">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
</body>
</html>

效果如下图：
在这里插入图片描述

步骤2：实现轮播图自动切换

需要引入jquery；

<script src="static/js/jquery.min.js"></script>

定时器实现4s自动切换轮播图

<script>
    $(function () {
        var index = 0;
        setInterval(function () {
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            if ($(".box-img").length - 1 === index) {
                index = 0
            } else {
                index++;
            }
        }, 4000)
    })
</script>

.box-img {
    ...
    /* 设置属性是否透明，0是透明，1是不透明 */
    opacity: 0;
    /* 过渡效果，延迟1.5s */
    transition: 1.5s;
}

.box-img:nth-child(1) {
	/* 设置属性是否透明，0是透明，1是不透明，默认显示第一张轮播图 */
    opacity: 1;
}

完毕，轮播图能够自动切换了

步骤3：左右切换，左右点击事件手动切换

实现代码如下：

// 左右切换
$(".box-left").click(function () {
    // 点击左，index减1，减到最小时让成为最大
    if (index === 0) {
        index = $(".box-img").length - 1;
    } else {
        index--;
    }
    $(".box-img").css("opacity", 0);
    $(".box-img").eq(index).css("opacity", 1);
});
$(".box-right").click(function () {
    // 点击右，index加1，加到最大时让成为最小
    if (index === $(".box-img").length - 1) {
        index = 0;
    } else {
        index++;
    }
    $(".box-img").css("opacity", 0);
    $(".box-img").eq(index).css("opacity", 1);
});

到目前存在自动切换轮播图，也存在手动切换轮播图。就可能存在手动切换时，又自动切换，客户体验就不太好，可以优化成，手动切换轮播图时，自动切换轮播图关掉，手动切换完成后，又开启自动切换轮播图。

优化后，自动切换和左右切换js代码如下：

<script>
    $(function () {
        var index = 0;
        var timer;

        // 自动切换
        function f() {
            var timer = setInterval(function () {
                $(".box-img").css("opacity", 0);
                $(".box-img").eq(index).css("opacity", 1);
                if ($(".box-img").length - 1 === index) {
                    index = 0
                } else {
                    index++;
                }
            }, 4000);
        }

        f();
        // 左右切换
        $(".box-left").click(function () {
            clearInterval(timer);
            // 点击左，index减1，减到最小时让成为最大
            if (index === 0) {
                index = $(".box-img").length - 1;
            } else {
                index--;
            }
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            f();
        });
        $(".box-right").click(function () {
            clearInterval(timer);
            // 点击右，index加1，加到最大时让成为最小
            if (index === $(".box-img").length - 1) {
                index = 0;
            } else {
                index++;
            }
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            f();
        });
    })
</script>

步骤4：点击切换，点击圆点事件手动切换

代码如下：

$(".btn").click(function () {
    clearInterval(timer);
    // 获取第几个圆点
    index = $(this).index()
    // alert(index)
    $(".box-img").css("opacity", 0);
    $(".box-img").eq(index).css("opacity", 1);
    $(".btn").css("background-color", "#4a5460");
    $(".btn").eq(index).css("background-color", "#ffffff");
    f();
});

自动切换、左右切换，其对应圆点背景色也设置成白色

html+css+jquery实现轮播图自动切换、左右切换、点击切换，代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            height: 460px;
            width: 1000px;
            position: relative;
        }

        .box-img {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            transition: 1.5s;
        }

        .box-img:nth-child(1) {
            opacity: 1;
        }

        .box-img img {
            height: 460px;
            width: 1000px;
        }

        /*左右切换*/
        .box-left {
            position: absolute;
            left: 0;
            top: 195px;
            width: 35px;
            height: 70px;
            border-radius: 0 5px 5px 0;
            text-align: center;
            line-height: 70px;
            font-size: 27px;
            color: #b0afad;
        }

        .box-left:hover {
            background-color: #777777;
            color: #ffffff;
        }

        .box-right {
            position: absolute;
            right: 0;
            top: 195px;
            width: 35px;
            height: 70px;
            border-radius: 5px 0 0 5px;
            text-align: center;
            line-height: 70px;
            font-size: 27px;
            color: #b0afad;
        }

        .box-right:hover {
            background-color: #777777;
            color: #ffffff;
        }

        /*圆点*/
        .box-dot {
            position: absolute;
            right: 50px;
            bottom: 20px;
        }

        .box-dot ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .box-dot ul li {
            width: 14px;
            height: 14px;
            border-radius: 100%;
            background-color: #4a5460;
            float: left;
            margin-right: 10px;
        }

        .box-dot ul li:hover, .box-dot ul li:nth-child(1) {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="box">
    <!-- 轮播图 -->
    <div class="box-img"><img src="static/image/1.jpg"></div>
    <div class="box-img"><img src="static/image/2.jpg"></div>
    <div class="box-img"><img src="static/image/6.jpg"></div>
    <div class="box-img"><img src="static/image/4.jpg"></div>
    <div class="box-img"><img src="static/image/5.jpg"></div>
    <div class="box-img"><img src="static/image/3.jpg"></div>
    <!-- 左右切换 -->
    <div class="box-left">&lt;</div>
    <div class="box-right">&gt;</div>
    <!-- 圆点 -->
    <div class="box-dot">
        <ul>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
        </ul>
    </div>
</div>
</body>
<script src="static/js/jquery.min.js"></script>
<script>
    $(function () {
        var index = 0;
        var timer;

        // 自动切换
        function f() {
            var timer = setInterval(function () {
                $(".box-img").css("opacity", 0);
                $(".box-img").eq(index).css("opacity", 1);
                $(".btn").css("background-color", "#4a5460");
                $(".btn").eq(index).css("background-color", "#ffffff");
                if ($(".box-img").length - 1 === index) {
                    index = 0
                } else {
                    index++;
                }
            }, 4000);
        }

        f();
        // 左右切换
        $(".box-left").click(function () {
            clearInterval(timer);
            // 点击左，index减1，减到最小时让成为最大
            if (index === 0) {
                index = $(".box-img").length - 1;
            } else {
                index--;
            }
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            $(".btn").css("background-color", "#4a5460");
            $(".btn").eq(index).css("background-color", "#ffffff");
            f();
        });
        $(".box-right").click(function () {
            clearInterval(timer);
            // 点击右，index加1，加到最大时让成为最小
            if (index === $(".box-img").length - 1) {
                index = 0;
            } else {
                index++;
            }
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            $(".btn").css("background-color", "#4a5460");
            $(".btn").eq(index).css("background-color", "#ffffff");
            f();
        });
        // 点击圆点切换轮播图
        $(".btn").click(function () {
            clearInterval(timer);
            // 获取第几个圆点
            index = $(this).index()
            // alert(index)
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            $(".btn").css("background-color", "#4a5460");
            $(".btn").eq(index).css("background-color", "#ffffff");
            f();
        });
    })
</script>
</html>