JavaScript的无缝轮播图（手动自动）

轮播图的效果图

具体的功能：1.自动播放 2.左右焦点切换 3.底下小按钮切换

以下是实现代码：

css样式：

 * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }
        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }
        .screen {
            width: 500px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }
        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 3000px;
        }
        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }
        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }
        .all ol li.current {
            background: yellow;
        }
        #arr {
            display: none;
            z-index: 1000;
        }
        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }
        #arr #right {
            right: 5px;
            left: auto;
        }

HTML代码：

<div class="all" id='box'>
        <div class="screen">
            <ul>
                <li><img src="images/1.jpg" width="500" height="200" /></li>
                <li><img src="images/2.jpg" width="500" height="200" /></li>
                <li><img src="images/3.jpg" width="500" height="200" /></li>
                <li><img src="images/4.jpg" width="500" height="200" /></li>
                <li><img src="images/5.jpg" width="500" height="200" /></li>
            </ul>
            <ol>
            </ol>
        </div>
        <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
    </div>

js代码：

 //获取元素
        let screen = document.getElementsByClassName('screen')[0]
        let ul = screen.children[0]
        let lis = ul.getElementsByTagName('li')
        let first_li = lis[0]
        let ol = screen.children[1]
        let img_width = first_li.offsetWidth
        let arr_l = document.getElementById('left')
        let arr_r = document.getElementById('right')
        let box = document.getElementById('box')
        let arr = document.getElementById('arr')
        function animate(el, target) {
       //封装的动画效果
      if (el.timerId) {
        clearInterval(el.timerId)
        timerId = null
     }
     el.timerId = setInterval(function () {
         let currrent = el.offsetLeft
         let step = 10
         if (currrent >= target) {
            step = -step
         }
         currrent += step
         el.style.left = currrent + 'px'
         if (Math.abs(currrent - target) < step) {
             el.style.left = target + 'px'
             clearInterval(el.timerId)

                }
           }, 30)
            }
        //动态创建ol下面的li
        for (let i = 0; i < lis.length; i++) {
            let li = document.createElement('li')
            li.innerText = i + 1
            li.setAttribute('index', i)
            ol.appendChild(li)
            if (i == 0) {
                li.className = 'current'
            }
            //给每个li注册事件
            li.onclick = Liclick
        }
        //封装li的点击事件
        let ol_li = ol.getElementsByTagName('li')
        function Liclick() {
            // 排他 让其他所有的li取消高亮
            for (let i = 0; i < ol_li.length; i++) {
                ol_li[i].className = ''
            }
            let li_index = parseInt(this.getAttribute('index'))
            this.className = 'current'
            animate(ul, -li_index * img_width)
        }
        //经过大盒子让箭头显示，离开时箭头隐藏
        box.onmouseenter = function () {
            arr.style.display = 'block'
        }
        box.onmouseleave = function () {
            arr.style.display = 'none'
        }
        let index = 0;
        arr_r.onclick = function () {
            if (index == lis.length-1) {
                index = 0
                ul.style.left = '0px'
            }
            index++
            if (index < lis.length-1) {
                ol_li[index].click()
            } else {
                animate(ul, -index * img_width)
                for (let i = 0; i < ol_li.length; i++) {
                    ol_li[i].className = ''
                }
            ol_li[0].className = 'current'
        }
        }
        arr_l.onclick=function(){
            if(index==0){
                index=5
                ul.style.left=-index*img_width+'px'
            }
            index--
            ol_li[index].click()
        }
        setInterval (function(){
            arr_r.onclick()
        },5000)
        //克隆第一个li
        let cllone_li = first_li.cloneNode(true)
        ul.appendChild(cllone_li)