无缝轮播

实现效果

点击下一张时，图片无缝轮播到下一张，圆圈也颜色变到对应的位置，并且其他圆圈颜色为蓝色。当点击圆圈中某一个时，图片轮播展示对应的图片。

css 样式

<style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 500px;
            margin: 0 auto;
        }

        #view {
            width: 500px;
            margin: 0 auto;
            height: 300px;
            border: 5px solid #c08eaf;
            overflow: hidden;
            position: relative;
        }

        #banner li {
            float: left;
            overflow: hidden;
        }

        #banner img {
            width: 500px;
            height: 300px;
        }

        #banner {
            width: 2500px;
            overflow: hidden
        }

        #prev {
            float: left;
        }

        #next {
            float: right;
        }

        section {
            left: calc(50% - 80px);
            position: absolute;
            bottom: 10px;
        }

        span {
            margin: 0 10px;
            float: left;
            width: 15px;
            height: 15px;
            border-radius: 50% 50%;
            background-color: #8fb2c9;
        }

        img {
            width: 500px;
            height: 300px;
        }



<div id="view">
        <ul id="banner">
            <li><img src='./img/1.jpg' alt=""></li>
            <li><img src="./img/2.jpg" alt=""></li>
            <li><img src="./img/3.jpg" alt=""></li>
            <li><img src="./img/4.jpg" alt=""></li>
            <li><img src="./img/1.jpg" alt=""></li>
        </ul>
        <section>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <section>
    </div>
    <div>
        <button id="pre">上一张<tton>
                <button id="next">下一张<tton>
    </div>

js代码

<script>
        //获取
        var banner = document.getElementById('banner');
        var pre = document.getElementById('pre');
        var next = document.getElementById('next');
        var spans = document.getElementsByTagName('span');
        var count = 0;
        var len = banner.children.length - 1;
        console.log(len);

        //初始化span圆圈当前的背景颜色
        spans[count].style.backgroundColor = '#eba0b3';


        // var len = banner.children.length;
        //下一张
        next.onclick = function () {
            nextShow();
        }
        pre.onclick = function () {
            preShow();
        }

        //鼠标点击span小圆圈的时候 展示对应的图片
        for (let j = 0; j < len; j++) {
            spans[j].onclick = function(){
                //给对应的span圆圈添加颜色
                addBg(j);
                $_animation(banner, 'marginLeft', -500 * j, 1000, function () {
                if (count >= len) {
                    count = 0;
                    banner.style.marginLeft = 0 + 'px';
                }
            })
            }
        }

        function nextShow() {
            ++count;
            if (count <= len - 1) {
                addBg(count);
            }
            else{
                var h =0;
                addBg(h);
            }
            $_animation(banner, 'marginLeft', -500 * count, 1000, function () {
                if (count >= len) {
                    count = 0;                  
                    banner.style.marginLeft = 0 + 'px';
                }
            })
        }

        function preShow() {
            --count;
            if (count < 0) {
                count = 3;
                addBg(count);
                banner.style.marginLeft = -500 * len + 'px';
            }
            else {
                addBg(count);
            }
            $_animation(banner, 'marginLeft', -500 * count, 1000)
        }

        function addBg(k) {
            for (var i = 0; i < len; i++) {
                spans[i].style.backgroundColor = '#8fb2c9'
            }
            spans[k].style.backgroundColor = '#eba0b3'
        }


    </script>