原生js实现简单轮播图效果

//装轮播图的大盒子let oCarousel = document.querySelector('.carousel')//装轮播图左右按钮的标签的父元素let oChevron = document.querySelector('.chevron')//左按钮let oLeft = document.querySelector('.chevron-left')//右按钮let oRight = document.querySelector('.chevron-right')//获取放轮播图图片的父元素ullet oUl = document.querySelector('.carousel-body')//获取装轮播图图片的lilet oActives = document.querySelectorAll('.indicators li')

function animation(obj,target){    // 清除定时器        clearInterval(obj.timer)        obj.timer=setInterval(()=>{            // 读取元素当前位置            let curX=obj.offsetLeft             //定义一个步长            let step=10            // 判断将要移动的方向(比较目标位置与当前位置的大小)             if(target<curX){                step=-10            }            // 根据当前位置与目标位置，以及步长的关系判断            // 只要目标位置与当前位置之间的距离 < 步长，就直接将元素的位置设置为目标为位置即可            if(Math.abs(target-curX)<Math.abs(step)){                obj.style.left=target+'px'                clearInterval(obj.timer)            }else{                // 计算下一步的位置                let nextX=curX+step                // 将下一步的位置赋值给obj.style.left                obj.style.left=nextX+'px'            }        },10)    }

oCarousel.onmouseover = function () {        oChevron.style.display = "block"    }     oCarousel.onmouseout = function () {        oChevron.style.display = "none"    }

let n = 0let step = 500    oLeft.onclick = function () {        n--                if (n == -1) {       //当移到第一张(n=0)，再次点击时(n=-1)，将n设置为4，跳转到最后一张图片的位置       //装轮播图图片的ul的位置改为最后一张图片的位置（因为一张图片width为500px，所以最后一张在5*500=2500的位置）            oUl.style.left = -2500 + 'px'            n = 4        }        //target为移动距离，即：第n张图片 * 每张图片的width         let target = -n * step        animation(oUl, target)     }    oRight.onclick = function () {        n++        if (n == 6) {        //当移到第最后一张(n=5)，再次点击时(n=6)，将n设置为1，跳转到第一张图片的位置            oUl.style.left = 0 + 'px'            n = 1        }        let target = -n * step        animation(oUl, target)     }

//因为上面通过document.querySelectorAll('.indicators li') 获取到的li是通过伪数组的形式返回的，使用需要遍历该伪数组为每个li绑定点击事件for (let i = 0; i < oActives.length; i++) {        oActives[i].onclick = function () {            //为被点击的第i个设置样式为高亮            setActive(i)            //并且把i的值赋值给n（相当于记录当前应该显示第i张图片）            n = i            //设置移动的距离            let target = -n * step            animation(oUl, target)        }    }     // 封装一个函数，实现li的高亮    function setActive(ind) {        //使用排他思想：清除全部，然后在单独设置类名        for (let j = 0; j < oActives.length; j++) {            oActives[j].className = ''        }        oActives[ind].className = 'active'    }

oLeft.onclick = function () {        n--        if (n == -1) {            oUl.style.left = -2500 + 'px'            n = 4        }        //调用setActive()函数，修改第n张图片页码的高亮状态        setActive(n)        let target = -n * step        animation(oUl, target)     }    oRight.onclick = function () {        n++        if (n == 6) {            oUl.style.left = 0 + 'px'            n = 1        }        //如果n为5时，表示已经到了第6张图片（而第六张图片是和第1张一样的，只是用来滑动过渡，防止瞬间跳转的效果）所以需要设置页码为0（即第一张图片）的高亮状态        //这里使用了三元表达式，如果n为5，则设置第1张图片为高亮，否则设置第n张为高亮        n == 5 ? setActive(0) : setActive(n)        let target = -n * step        animation(oUl, target)     }

//在加载页面时应该先开启定时器，否则轮播图不能自动播放，需要等待一次移入且移出事件才会开启定时器timer = setInterval(function () {            //调用右侧按钮绑定的点击事件            oRight.onclick()        }, 2000)     //鼠标移入时，显示左右箭头，并且清除定时器    oCarousel.onmouseover = function () {        oChevron.style.display = "block"        clearInterval(timer)    }     //鼠标移出时，隐藏左右箭头，并且开启定时器    oCarousel.onmouseout = function () {        oChevron.style.display = "none"        timer = setInterval(function () {            oRight.onclick()        }, 2000)    }

* {     margin: 0;     padding: 0;        }         .carousel {            width: 500px;            height: 200px;            border: 1px solid red;            margin: 100px auto;            position: relative;            overflow: hidden;        }        .carousel li {            list-style: none;        }         /* 轮播内容 */        .carousel-body {            width: 3000px;            height: 200px;            position: absolute;        }        .carousel-body li {            list-style: none;            float: left;            width: 500px;            height: 200px;        }         .carousel-body li img {            width: 100%;            height: 100%;        }          /* 左右焦点按钮 */        .carousel .chevron {            position: absolute;            top: 50%;            height: 40px;            width: 100%;            transform: translateY(-50%);            display: none;        }         .carousel .chevron-left,        .carousel .chevron-right {            width: 40px;            height: 40px;            background: #000;            cursor: pointer;            text-align: center;            line-height: 40px;            font-size: 30px;            font-weight: bold;            color: #fff;            opacity: .3;            border: 1px solid #fff;        }          .carousel .chevron-left {            float: left;            margin-left: 10px;        }          .carousel .chevron-right {            float: right;            margin-right: 10px;        }          /* 5.2 轮播指示器结构 */        .carousel .indicators {            position: absolute;            right: 30px;            bottom: 20px;        }         .carousel .indicators li {            float: left;            width: 20px;            height: 20px;            margin-right: 10px;            background: rgba(255, 255, 255, .8);            text-align: center;            line-height: 20px;            cursor: pointer;            color: rgba(0, 0, 0, .5);        }         .carousel .indicators li.active {            background: #09f;            color: red; }

<div class="carousel">        <!-- 轮播内容 -->        <ul class="carousel-body">            <li><a href="#"><img src="./images/1.jpg" alt=""></a></li>            <li><a href="#"><img src="./images/2.jpg" alt=""></a></li>            <li><a href="#"><img src="./images/3.jpg" alt=""></a></li>            <li><a href="#"><img src="./images/4.jpg" alt=""></a></li>            <li><a href="#"><img src="./images/5.jpg" alt=""></a></li>            <li><a href="#"><img src="./images/1.jpg" alt=""></a></li>            <!-- a3.1 新增1个li与第1张相同 -->            <!-- <li><a href="#"><img src="./images/1.jpg" alt=""></a></li> -->        </ul>        <!-- 左右焦点按钮 -->        <div class="chevron">            <div class="chevron-left">&laquo;</div>            <div class="chevron-right">&raquo;</div>        </div>        <!-- 5.1 轮播指示器结构 -->        <ol class="indicators">            <li class="active">1</li>            <li>2</li>            <li>3</li>            <li>4</li>            <li>5</li>        </ol></div>

let oCarousel = document.querySelector('.carousel')let oChevron = document.querySelector('.chevron')let oLeft = document.querySelector('.chevron-left')let oRight = document.querySelector('.chevron-right')let oUl = document.querySelector('.carousel-body')let oActives = document.querySelectorAll('.indicators li')     let n = 0    let step = 500    let timer    timer = setInterval(function () {            oRight.onclick()        }, 2000)    oCarousel.onmouseover = function () {        oChevron.style.display = "block"        clearInterval(timer)    }     oCarousel.onmouseout = function () {        oChevron.style.display = "none"        timer = setInterval(function () {            oRight.onclick()        }, 2000)    }    oLeft.onclick = function () {        n--        if (n == -1) {            oUl.style.left = -2500 + 'px'            n = 4        }        setActive(n)        let target = -n * step        animation(oUl, target)     }    oRight.onclick = function () {        n++        if (n == 6) {            oUl.style.left = 0 + 'px'            n = 1        }        n == 5 ? setActive(0) : setActive(n)        let target = -n * step        animation(oUl, target)     }    for (let i = 0; i < oActives.length; i++) {        oActives[i].onclick = function () {            setActive(i)            n = i            let target = -n * step            animation(oUl, target)        }    }     // 封装一个函数，实现li的高亮    function setActive(ind) {        for (let j = 0; j < oActives.length; j++) {            oActives[j].className = ''        }        oActives[ind].className = 'active'    }     function animation(obj,target){        // 清除定时器        clearInterval(obj.timer)        obj.timer=setInterval(()=>{            // 读取元素当前位置            let curX=obj.offsetLeft             //定义一个步长            let step=10            // 判断将要移动的方向(比较目标位置与当前位置的大小)             if(target<curX){                step=-10            }            // 根据当前位置与目标位置，以及步长的关系判断            // 只要目标位置与当前位置之间的距离 < 步长，就直接将元素的位置设置为目标为位置即可            if(Math.abs(target-curX)<Math.abs(step)){                obj.style.left=target+'px'                clearInterval(obj.timer)            }else{                // 计算下一步的位置                let nextX=curX+step                // 将下一步的位置赋值给obj.style.left                obj.style.left=nextX+'px'            }        },10)}