lovecoding
/
W250511


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4974983_z46pr7nyg5p.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .swiper-content {
            width: 1226px;
            height: 460px;
            margin: 100px auto;
            position: relative;
        }

        .swiper-nav {
            width: 234px;
            height: 100%;
            background-color: rgba(105, 101, 101, 0.6);
            position: relative;
            z-index: 1;
        }

        .swiper-nav ul {
            padding: 30px 0;
        }

        .swiper-nav ul li {
            color: #fff;
            font-size: 14px;
            padding: 0 20px;
            height: 42px;
            line-height: 42px;
        }

        .swiper-nav ul li:hover {
            background-color: #ff6700;
            cursor: pointer;
        }

        .swiper-nav li i {
            float: right;
        }

        .swiper-content .swiper-img img {
            width: 1226px;
            height: 460px;
        }

        .swiper-content .swiper-img li {
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        .swiper-content .swiper-img .active {
            display: block;
        }

        .swiper-btn .arr-btn {
            position: absolute;
            top: 50%;
            margin-top: -35px;
            width: 100%;
        }

        .swiper-btn .arr-btn .left-btn {
            position: absolute;
            left: 234px;
            width: 41px;
            height: 70px;
            background-image: url("./image/icon-slides.png");
            background-position: -84px 0;
        }

        .swiper-btn .arr-btn .left-btn:hover {
            background-position: 0 0;
            cursor: pointer;
        }

        .swiper-btn .arr-btn .right-btn {
            position: absolute;
            right: 0;
            width: 41px;
            height: 70px;
            background-image: url("./image/icon-slides.png");
            background-position: -125px 0;
        }

        .swiper-btn .arr-btn .right-btn:hover {
            background-position: -41px 0;
            cursor: pointer;
        }

        .swiper-btn .dot-btn ul {
            position: absolute;
            right: 30px;
            bottom: 30px;
        }

        .swiper-btn .dot-btn li {
            width: 6px;
            height: 6px;
            background-color: rgba(0, 0, 0, .4);
            border: 2px solid hsla(0, 0%, 100%, .3);
            border-radius: 50%;
            float: left;
            margin: 0 5px;
        }

        .swiper-btn .dot-btn li:hover {
            background: hsla(0, 0%, 100%, .4);
            border-color: rgba(0, 0, 0, .4);
            cursor: pointer;
        }

        .swiper-btn .dot-btn .active {
            background: hsla(0, 0%, 100%, .4);
            border-color: rgba(0, 0, 0, .4);
        }
    </style>
</head>

<body>
    <div class="swiper-content">
        <!-- 左侧导航 -->
        <div class="swiper-nav">
            <ul>
                <li>手机 <i class="iconfont icon-arrow"></i> </li>
                <li>电视 <i class="iconfont icon-arrow"></i> </li>
                <li>家电 <i class="iconfont icon-arrow"></i></li>
                <li>笔记本 平板 显示器 <i class="iconfont icon-arrow"></i></li>
                <li>出行 穿戴 <i class="iconfont icon-arrow"></i></li>
                <li>耳机 音箱 <i class="iconfont icon-arrow"></i></li>
                <li>健康 儿童 <i class="iconfont icon-arrow"></i></li>
                <li>生活 箱包 <i class="iconfont icon-arrow"></i></li>
                <li>智能 路由器 <i class="iconfont icon-arrow"></i></li>
                <li>电源 配件 <i class="iconfont icon-arrow"></i></li>
            </ul>
        </div>
        <!-- 轮播图 图片区域 -->
        <div class="swiper-img">
            <ul>
                <li class="swiper-item active">
                    <img src="./image/slider1.jpg" alt="">
                </li>
                <li class="swiper-item">
                    <img src="./image/slider2.jpeg" alt="">
                </li>
                <li class="swiper-item">
                    <img src="./image/slider3.png" alt="">
                </li>
                <li class="swiper-item">
                    <img src="./image/slider4.jpeg" alt="">
                </li>
                <li class="swiper-item">
                    <img src="./image/slider5.jpg" alt="">
                </li>
                <li class="swiper-item">
                    <img src="./image/slider6.jpg" alt="">
                </li>
            </ul>

        </div>
        <!-- 轮播图 按钮区域 -->
        <div class="swiper-btn">
            <div class="arr-btn">
                <div class="left-btn"></div>
                <div class="right-btn"></div>
            </div>
            <div class="dot-btn">
                <ul>
                    <li class="dot-item active"></li>
                    <li class="dot-item"></li>
                    <li class="dot-item"></li>
                    <li class="dot-item"></li>
                    <li class="dot-item"></li>
                    <li class="dot-item"></li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        // 第一步获取要控制的元素
        // 获取小点按钮
        var dotItem = document.getElementsByClassName("dot-item");
        // 获取轮播图图片
        var swiperItem = document.getElementsByClassName("swiper-item");
        // 获取向左按钮
        var leftBtn = document.getElementsByClassName("left-btn");
        leftBtn = leftBtn[0];
        // 获取向右按钮
        var rightBtn = document.getElementsByClassName("right-btn");
        rightBtn = rightBtn[0];
        // 获取轮播图容器
        var swiperContent = document.getElementsByClassName("swiper-content");
        swiperContent = swiperContent[0];

        // 定义变量保存当前是第几个轮播图
        var nowIndex = 0;

        // 定义定时函数的接收变量
        var timer = null;

        // 把切换图片封装成一个函数
        // 你告诉这个显示第几张图片即可
        // k 带标要显示的轮播图
        function changeImg(k) {
            // 移除所有被选中的的轮播图和小圆点
            for (var i = 0; i < swiperItem.length; i++) {
                // 移除轮播图选中效果
                swiperItem[i].classList.remove("active");
                // 移除小圆点选中效果
                dotItem[i].classList.remove("active");
            }
            // 给选中的轮播图添加选中效果
            swiperItem[k].classList.add("active");
            // 给选中的小圆点添加选中效果
            dotItem[k].classList.add("active");
        }

        // 第二步为小圆点绑定事件
        for (var i = 0; i < dotItem.length; i++) {
            // 为每一个绑定事件的标签分配一个编号
            dotItem[i].index = i;
            // 为每一个按钮绑定事件
            dotItem[i].onclick = function () {
                // 同步当前索引
                nowIndex = this.index;
                // 调用切换图片函数
                changeImg(nowIndex);

                // console.log(this.index);
                // // 第四步 移除没有被选中的轮播图及效果
                // for(var j=0;j<dotItem.length;j++){
                //     swiperItem[j].classList.remove("active");
                //     dotItem[j].classList.remove("active");
                // }

                // // 第三步切换轮播图图片 及选中效果
                // swiperItem[this.index].classList.add("active");
                // // 给当前点击的小点加上选中效果
                // this.classList.add("active");
            }
        }


        // 为向右按钮绑定事件
        rightBtn.onclick = function () {
            // 每次点击向右按钮进行 让当前索引nowIndex +1操作
            nowIndex++;
            // 如果超出了轮播图数量的范围 返回第一张图片
            if (nowIndex >= swiperItem.length) {
                nowIndex = 0
            }

            // 调用切换图片的函数
            changeImg(nowIndex);


            // nowIndex++;
            // nowIndex%=6;

            // for(var i=0;i<swiperItem.length;i++){
            //     swiperItem[i].classList.remove("active");
            //     dotItem[i].classList.remove("active");
            // }
            // swiperItem[nowIndex].classList.add("active");
            // dotItem[nowIndex].classList.add("active");
        }
        // 为向左按钮绑定事件
        leftBtn.onclick = function () {
            nowIndex--;
            if (nowIndex < 0) {
                nowIndex = swiperItem.length - 1;
            }
            changeImg(nowIndex);
        }

        // 定时播放
        function play() {
            timer = setInterval(function () {
                nowIndex++
                if (nowIndex >= swiperItem.length) {
                    nowIndex = 0;
                }
                changeImg(nowIndex)
            }, 2000)
        }

        // 调用定时播放函数
        play();

        // 鼠标移入清除定时函数
        swiperContent.onmouseenter = function () {
            clearInterval(timer);
        }
        // 鼠标移出继续定时轮播
        swiperContent.onmouseleave = function () {
            play();
        }

    </script>
</body>

</html>