纯JavaScript实现轮播图：点击、自动播放与无缝切换

HTML结构与CSS样式实现

<body>
    <div class="main">
        <div class="focus fl">
            <a href="javascript:;" class="arrow-l">&lt;</a>
            <a href="javascript:;" class="arrow-r"> > </a>
            <ul>
                <li>
                    <a href="#" ><img src="../02/15轮播图制作/upload/focus.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#" ><img src="../02/15轮播图制作/upload/focus1.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#" ><img src="../02/15轮播图制作/upload/focus2.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#" ><img src="../02/15轮播图制作/upload/focus3.jpg" alt=""></a>
                </li>
 
            </ul>
            <ol class="circle">
 
            </ol>
        </div>
    </div>
 
</body>

<style>
        * {
            padding: 0;
            margin: 0;
        }
        
        a {
            text-decoration: none;
        }
        
        ol {
            list-style: none;
        }
        
        .main {
            width: 980px;
            height: 455px;
            margin-left: 440px;
            margin-top: 10px;
        }
        
        .focus {
            position: relative;
            width: 721px;
            height: 455px;
            background-color: purple;
            overflow: hidden;
        }
        
        .focus ul {
            position: absolute;
            top: 0;
            left: 0;
            width: 600%;
        }
        
        .focus ul li {
            float: left;
            list-style: none;
        }
        
        .arrow-l,
        .arrow-r {
            display: none;
            position: absolute;
            top: 50%;
            margin-top: -20px;
            width: 24px;
            height: 40px;
            background: rgba(0, 0, 0, .3);
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-family: 'icomoon';
            font-size: 18px;
            z-index: 2;
        }
        
        .arrow-r {
            right: 0;
        }
        
        .circle {
            position: absolute;
            bottom: 10px;
            left: 50px;
        }
        
        .circle li {
            float: left;
            width: 8px;
            height: 8px;
            /*background-color: #fff;*/
            border: 2px solid rgba(255, 255, 255, 0.5);
            margin: 0 3px;
            border-radius: 50%;
            /*鼠标经过显示小手*/
            cursor: pointer;
        }
        
        .current {
            background-color: #fff;
        }
 </style>

JavaScript交互逻辑与自动播放

window.addEventListener('load', function() {
    // 获取要使用到的元素
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;
    //鼠标移动到图片上，显示左右切换的按钮
    focus.addEventListener('mouseenter', function() {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
    //清除定时器，不再自动播放
        clearInterval(timer);
        timer = null; //清除定时器变量
    });
    //鼠标离开，左右切换按钮隐藏
    focus.addEventListener('mouseleave', function() {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        timer = setInterval(function() {
            arrow_r.click();
        }, 2000)
    });
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    console.log(ol);
    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');
    //创建自定义属性index
        li.setAttribute('index', i);
    //根据li（图片）的个数自动添加左下角的小圆点
        ol.appendChild(li);
        li.addEventListener('click', function() {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'current';
            var index = this.getAttribute('index');
            num = index;
            circle = index;
            animate(ul, -index * focusWidth);
        })
    }
    ol.children[0].className = 'current';
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    var num = 0;
    var circle = 0;
    var flag = true;
    //点击'>'进行图片向右切换
    arrow_r.addEventListener('click', function() {
        if (num == ul.children.length - 1) {
            ul.style.left = 0;
            num = 0;
        }
        num++;
        animate(ul, -num * focusWidth);
        circle++;
        if (circle == ol.children.length) {
            circle = 0;
        }
        circleChange();
    });
    //点击'<'进行图片向左切换
    arrow_l.addEventListener('click', function() {
        if (num == 0) {
            num = ul.children.length - 1;
            ul.style.left = -num * focusWidth + 'px';
        }
        num--;
        animate(ul, -num * focusWidth);
        circle--;
        circle = circle < 0 ? ol.children.length - 1 : circle;
        circleChange()
    });
    //清除样式函数，排他思想
    function circleChange() {
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';
    }
    //定时器+click（）实现自动播放
    var timer = setInterval(function() {
        arrow_r.click();
    }, 2000)
 
})