JS轮播图，写法二

JS轮播图，写法二

需求：
自动轮播，鼠标移入轮播停止、移出继续，小圆点点击切图，左右箭头切图
效果图：
![轮播图

思路：

将所有需要轮播的图片横向排列，可视区大小设置为只能显示一张图片，给容器设置移出隐藏后，可视区之外的部分被隐藏，这样我们就只能看见一张图片。
轮播实现是改变整个图片画幅的left值或者margin-left 值，当点击时移动整个画幅单个图片的宽度即可实现滚动到下一张。
后面功能实现顺序依旧是写法一里的思路。

戳！写法一地址

HTML部分：

<div id="banner">
    <div class="w">
<!--         左右箭头-->
        <span class="iconfont icon-zuojiantou"></span>
        <span class="iconfont icon-youjiantou"></span>
<!--         轮播图-->
        <ul >
            <li><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
        </ul>
<!--        /小圆点-->
        <ol id="circleContainer">

        </ol>
    </div>
</div>

CSS部分：

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .w {
            width: 1000px;
            height: 600px;
            margin: 100px auto 0;
            position: relative;
            overflow: hidden;
        }
        ul {
            width: 1000%;
            transition: all .5s ease-in-out;
        }
        ul li {
            float: left;
            width: 1000px;
        }
        ul li img {
            width: 100%;
            height: 600px;
        }
        .iconfont {
            color: white;
            position: absolute;
            font-size: 30px;
            top: calc(50% - 15px);
            background-color: rgba(216, 216, 216, 0.23);
            border-top-right-radius: 50%;
            border-bottom-right-radius: 50%;
            cursor: pointer;
        }
        .iconfont:hover {
            color: palegreen;
        }
        .icon-zuojiantou {
            left: 0;
        }
        .icon-youjiantou {
           right: 0;
        }
        #circleContainer {
            position: absolute;
            bottom: 10px;
            left: calc(50% - 30px);
        }
        #circleContainer li {
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: white;
            margin-right: 5px;
        }
        #circleContainer .change {
            background-color: palegreen;
        }
    </style>

JS部分：

<script>
   let timer = setInterval(function () {
        arrow_r.onclick();
    },2000);
    let w = document.querySelector(".w");
    w.addEventListener("mouseenter",function () {
        clearInterval(timer);
    });
    w.addEventListener("mouseleave",function () {
        clearInterval(timer);
        timer = setInterval(function () {
            arrow_r.onclick();
        },2000);
    });
    //获取元素
    let ul = document.querySelector("ul");
    let ol = document.querySelector("#circleContainer");
    let arrow_r = document.querySelector(".icon-youjiantou");
    let arrow_l = document.querySelector(".icon-zuojiantou");
    let ImgWidth = ul.children[0].offsetWidth;
    let location_i = 0 ;
    // 创建小圆点 动态生成小圆点，图片增加时小圆点也随之增加
    for (let i = 0; i<ul.children.length;i++){
        let li = document.createElement("li");
        li.setAttribute("index",i);
        li.addEventListener("click",function () {
            let index = this.getAttribute("index");
            move(ul,index);
            location_i = index ;
        });
        ol.appendChild(li);
    }

    let liclone = ul.children[0].cloneNode(true);
    ul.appendChild(liclone);
    // 轮播函数
    function move(targetObj,n) {
        if (n === targetObj.children.length ) {
            targetObj.style.marginLeft = "0px";
            n = 0;
        }
        targetObj.style.marginLeft = -n * ImgWidth +"px";
        for (let i =0 ;i<ol.children.length;i++){
            ol.children[i].className = "";
        }
        n === 3 ? ol.children[0].className = "change": ol.children[n].className = "change";

    }
    ol.children[0].className = "change";
    // 右箭头点击
    arrow_r.onclick = function () {
        if (location_i === 3) {
            location_i = 0 ;
            ul.style.marginLeft = "0px" ;
        }
        location_i++;
        move(ul,location_i);

    };
    // 左箭头点击
    arrow_l.addEventListener("click",function () {
        if (location_i == 0) {
            location_i = ul.children.length -1 ;
        }
        location_i--;
        move(ul,location_i);
    })
</script>