JavaScript（轮播图）

css区域

*{
    margin: 0;
    padding: 0;
}
.rotation_chart{
    width: 500px;
    height: 500px;
    border: 1px solid;
    margin: 20px auto;
    position: relative;
    overflow: hidden;
}
.rotation_chart ul{
    width: calc(500px * 6);
    height: 500px;
    position: absolute;
}
.rotation_chart ul li{
    width: 500px;
    height: 500px;
    list-style: none;
    float: left;
}
.rotation_chart ul li img{
    width: 100%;
    height: 100%;
}
.rotation_chart .btn{
    width: 500px;
    height: 50px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.rotation_chart .btn span{
    float: left;
    width: 50px;
    height: 50px;
    background-color: #ccc;
    opacity: .7;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}
.rotation_chart .btn span:last-child{
    float: right;
}
.rotation_chart ol{
    width: 160px;
    height: 15px;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
}
.rotation_chart ol li{
    list-style: none;
    width: 20px;
    height: 20px;
    background-color:black;
    border-radius: 50%;
    font-size: 12px;
    text-align: center;
    line-height: 20px;
    float: left;
    margin: 0 3px;
    cursor: pointer;
    color: #fff;
}
.active{
    background-color: chartreuse !important;
}

html区域

 <div class="rotation_chart">
        <!--图片区域-->
        <ul class="swiper">
            <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.png" alt=""></li>
            <li><img src="img/5.jpg" alt=""></li>
        </ul>
        <!--左右按钮区域-->
        <div class="btn">
            <span>&lt;</span>
            <span>&gt;</span>
        </div>
        <!--小圆圈区域-->
        <ol>
            <!-- <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li> -->
        </ol>
    </div>

引入的js

/* 
        * 缓冲运动的函数
        *
        * @params {Object} ele 元素  
        * @params  {Object} options 改变的多属性目标
        * @params  {Function} callback 回调函数
       
       */
function animateHc(ele, options, callback) {


    for (let key in options) {
        clearInterval(ele[key])
        ele[key] = setInterval(() => {
            //    console.log(key)

            let attr = key // 改变的样式 
            let target = options[key] // 目标值

            //1. 获取初始值
            let begin = parseInt(getStyle(ele, attr))
            // console.log(begin)
            let step = (target - begin) / 10
            step = step > 0 ? Math.ceil(step) : Math.floor(step)
            // console.log(step)

            //2.计算移动距离  
            let res = begin + step
            // console.log(res)

            // 4.设置移动距离
            ele.style[attr] = res + 'px'

            // 关闭定时器
            if (res == target) {
                clearInterval(ele[key])
                callback && callback()
            }
        }, 30)

    }
}


function  getColor(){
     return  `rgb(${randomNum(0,255)},${randomNum(0,255)},${randomNum(0,255)})` 
}

function  randomNum(a,b){
       var max = Math.max(a,b)
       var min = Math.min(a,b)
       return Math.floor(Math.random()*(max-min+1)) + min
}



// 获取样式的函数
function getStyle(ele, attr) {
    if (window.getComputedStyle) {
        return getComputedStyle(ele, null)[attr]
    } else {
        return ele.currentStyle[attr]
    }
}

js区域

        class Swiper {
            constructor(ul, options) {
                const { btn, ol,autoplay } = options
                this.ul = document.querySelector(ul)
                this.ol = document.querySelector(ol)
                this.next = document.querySelector(btn).children[1]
                this.prev = document.querySelector(btn).children[0]
                this.imgWidth = this.ul.children[0].offsetWidth
                this.count = 0
                this.num = 0
                this.timer = null
                this.autoplay = autoplay

                this.init()
            }

            // 初始化
            init() {
                this.setCircle()
                this.handleCircle()
                this.handleNext()
                this.handlePrev()
                if(this.autoplay){
                    this.setAutoPlay(this.autoplay.delp)
                }
            }
            // 创建小圆圈
            setCircle() {
                [...this.ul.children].forEach((it, index) => {
                    let li = document.createElement('li')
                    li.innerHTML = index + 1
                    this.ol.appendChild(li)
                })
                this.ol.children[0].classList.add('active')
                let copyNode = this.ul.children[0].cloneNode(true)
                this.ul.appendChild(copyNode)
            }
            //点击小圆圈切换图片 
            handleCircle() {
                [...this.ol.children].forEach((it, index) => {
                    it.onclick = () => {
                        this.count = index
                        this.num = index
                        // 改变小圆圈高亮 
                        this.changeActive()
                        // 切换图片 
                        animateHc(this.ul, { left: -index * this.imgWidth })

                    }
                })
            }

            // 点击往下  
            handleNext() {
                // console.log(this)
                this.next.onclick = () => {
                    this.handleAutoplay()
                }
            }

            // 往下的事件

            handleAutoplay() {
                // console.log('auto',this)
                if (this.count == this.ul.children.length - 1) {
                    this.count = 0
                    this.ul.style.left = 0
                }
                this.count++

                this.num++
                if (this.num == this.ol.children.length) {
                    this.num = 0
                }
                // 改变小圆圈高亮 
                this.changeActive()
                // // 切换图片 
                animateHc(this.ul, { left: -this.count * this.imgWidth })
            }

            // 往上  
            handlePrev() {
              this.prev.onclick = ()=>{
                if (this.count == 0) {
                    this.count = this.ul.children.length - 1
                    this.ul.style.left = - this.count * this.imgWidth
                }
                this.count--
                this.num--
                if (this.num < 0) {
                    this.num = this.ol.children.length - 1
                }
                // 改变小圆圈高亮 
                this.changeActive()
                // // 切换图片 
                animateHc(this.ul, { left: -this.count * this.imgWidth })
              }
            }
            setAutoPlay(delp=2000) {
                this.timer = setInterval(() => {
                    this.handleAutoplay()
                }, delp)
            }
            stopAutoPlay() {
                clearInterval(this.timer)
            }

            // 改变小圆圈的高亮 
            changeActive() {
                [...this.ol.children].forEach((it, index) => {
                    it.classList.remove('active')
                })
                this.ol.children[this.num].classList.add('active')
            }
        }


        let mySwiper = new Swiper('.swiper', {
            btn: '.btn',
            ol: 'ol',
            autoplay:true,
            // autoplay:{
            //     delp:2000
            // }
        })

        console.log(mySwiper)

页面展示效果