原生JS无缝轮播图

（1）原理介绍

（2）静态布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .banner-area{
             600px;
            height: 300px;
            border:1px solid;
            margin: 10px auto;
            position: relative;
            overflow: hidden;
        }
        .banner-area ul{
             4200px;
            height: inherit;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
        }
        .banner-area ul li{
             600px;
            height: 300px;
            float: left;
        }
        .banner-area ul li img{
            display: block;
             inherit;
            height: inherit;
        }
        .prev,.next{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
             50px;
            height: 50px;
            background: rgba(0,0,0,.3);
            color: white;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            z-index: 2;
        }
        .prev{
            left: 20px
        }
        .next{
            right: 20px;
        }
        .banner-area ol{
             200px;
            height: 30px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 10px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 2;
        }
        .banner-area ol li{
             16px;
            height: 16px;
            background: rgba(0,0,0,.4);
            border-radius: 50%;
            cursor: pointer;
        }
        .banner-area ol li.ol-active{
            background: rgba(0,0,0,.9);
        }
    </style>
</head>
<body>
    <div class="banner-area">
        <ul style="left: -600px">
            <li><img src="imgs/05.jpg"></li>
            <li><img src="imgs/01.jpg"></li>
            <li><img src="imgs/02.jpg"></li>
            <li><img src="imgs/03.jpg"></li>
            <li><img src="imgs/04.jpg"></li>
            <li><img src="imgs/05.jpg"></li>
            <li><img src="imgs/01.jpg"></li>
        </ul>
        <ol>
            <li data-index="1" class="ol-active"></li>
            <li data-index="2"></li>
            <li data-index="3"></li>
            <li data-index="4"></li>
            <li data-index="5"></li>
        </ol>
        <a href="javascript:;" class="prev">&lt;</a>
        <a href="javascript:;" class="next">&gt;</a>
    </div>
</body>
</html>

（3）箭头切换

<script type="text/javascript">
        window.onload = function(){
            /*轮播区域*/
            var bannerArea = document.querySelector('.banner-area');
            /*图片容器*/
            var imgArea = document.querySelector('.banner-area>ul');
            /*图片列表*/
            var imgList = document.querySelectorAll('.banner-area>ul>li');
            /*焦点列表*/
            var focusList = document.querySelectorAll('.banner-area>ol>li')
            /*切换按钮*/
            var prev = document.querySelector('.prev');
            var next = document.querySelector('.next');
            /*事件绑定*/
            next.onclick = function(){
                animateImg(-600)
            }
            prev.onclick = function(){
                animateImg(600)
            }
            function animateImg(option){
                imgArea.style.left = (parseInt(imgArea.style.left) + option) + 'px';
            }
        }   
    </script>

（4）无线滚动

            /*图片切换*/
            function animateImg(option){
                var imgAreaLeft = parseInt(imgArea.style.left) + option;
                imgArea.style.left = imgAreaLeft + 'px';
                if( imgAreaLeft> -600){
                    imgArea.style.left = -3000 + 'px';
                }
                if(imgAreaLeft < -3000){
                    imgArea.style.left = -600 + 'px';
                }
            }

（5）焦点切换

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .banner-area{
             600px;
            height: 300px;
            border:1px solid;
            margin: 10px auto;
            position: relative;
            overflow: hidden;
        }
        .banner-area ul{
             4200px;
            height: inherit;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
        }
        .banner-area ul li{
             600px;
            height: 300px;
            float: left;
        }
        .banner-area ul li img{
            display: block;
             inherit;
            height: inherit;
        }
        .prev,.next{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
             50px;
            height: 50px;
            background: rgba(0,0,0,.3);
            color: white;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            z-index: 2;
        }
        .prev{
            left: 20px
        }
        .next{
            right: 20px;
        }
        .banner-area ol{
             200px;
            height: 30px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 10px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 2;
        }
        .banner-area ol li{
             16px;
            height: 16px;
            background: rgba(0,0,0,.4);
            border-radius: 50%;
            cursor: pointer;
        }
        .banner-area ol li.focus-active{
            background: rgba(0,0,0,0.8);
        }
    </style>
</head>
<body>
    <div class="banner-area">
        <ul style="left: -600px">
            <li><img src="imgs/05.jpg"></li>
            <li><img src="imgs/01.jpg"></li>
            <li><img src="imgs/02.jpg"></li>
            <li><img src="imgs/03.jpg"></li>
            <li><img src="imgs/04.jpg"></li>
            <li><img src="imgs/05.jpg"></li>
            <li><img src="imgs/01.jpg"></li>
        </ul>
        <ol>
            <li data-index="1" class="focus-active"></li>
            <li data-index="2"></li>
            <li data-index="3"></li>
            <li data-index="4"></li>
            <li data-index="5"></li>
        </ol>
        <a href="javascript:;" class="prev">&lt;</a>
        <a href="javascript:;" class="next">&gt;</a>
    </div>
    <script type="text/javascript">
        window.onload = function(){
            /*轮播区域*/
            var bannerArea = document.querySelector('.banner-area');
            /*图片容器*/
            var imgArea = document.querySelector('.banner-area>ul');
            /*图片列表*/
            var imgList = document.querySelectorAll('.banner-area>ul>li');
            /*焦点列表*/
            var focusList = document.querySelectorAll('.banner-area>ol>li')
            /*切换按钮*/
            var prev = document.querySelector('.prev');
            var next = document.querySelector('.next');
            /*初始焦点激活*/
            var _index = 1;
            /*事件绑定*/
            next.onclick = function(){
                animateImg(-600)
                _index++
                animateFocus()
            }
            prev.onclick = function(){
                animateImg(600)
                _index--
                animateFocus()
            }
            /*图片切换*/
            function animateImg(option){
                var imgAreaLeft = parseInt(imgArea.style.left) + option;
                imgArea.style.left = imgAreaLeft + 'px';
                if( imgAreaLeft> -600){
                    imgArea.style.left = -3000 + 'px';
                }
                if(imgAreaLeft < -3000){
                    imgArea.style.left = -600 + 'px';
                }
            }
            /*焦点切换*/
            function animateFocus(option){
                if(_index>5){_index = 1;}
                if(_index<1){_index = 5;}
                focusList.forEach(function(item){
                    item.className = '';
                })
                focusList[_index - 1].className = 'focus-active';
            }
        }   
    </script>
</body>
</html>

（6）焦点切换

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .banner-area{
             600px;
            height: 300px;
            border:1px solid;
            margin: 10px auto;
            position: relative;
            overflow: hidden;
        }
        .banner-area ul{
             4200px;
            height: inherit;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
        }
        .banner-area ul li{
             600px;
            height: 300px;
            float: left;
        }
        .banner-area ul li img{
            display: block;
             inherit;
            height: inherit;
        }
        .prev,.next{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
             50px;
            height: 50px;
            background: rgba(0,0,0,.3);
            color: white;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            z-index: 2;
        }
        .prev{
            left: 20px
        }
        .next{
            right: 20px;
        }
        .banner-area ol{
             200px;
            height: 30px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 10px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 2;
        }
        .banner-area ol li{
             16px;
            height: 16px;
            background: rgba(0,0,0,.4);
            border-radius: 50%;
            cursor: pointer;
        }
        .banner-area ol li.focus-active{
            background: rgba(0,0,0,0.8);
        }
    </style>
</head>
<body>
    <div class="banner-area">
        <ul style="left: -600px">
            <li><img src="imgs/05.jpg"></li>
            <li><img src="imgs/01.jpg"></li>
            <li><img src="imgs/02.jpg"></li>
            <li><img src="imgs/03.jpg"></li>
            <li><img src="imgs/04.jpg"></li>
            <li><img src="imgs/05.jpg"></li>
            <li><img src="imgs/01.jpg"></li>
        </ul>
        <ol>
            <li data-index="1" class="focus-active"></li>
            <li data-index="2"></li>
            <li data-index="3"></li>
            <li data-index="4"></li>
            <li data-index="5"></li>
        </ol>
        <a href="javascript:;" class="prev">&lt;</a>
        <a href="javascript:;" class="next">&gt;</a>
    </div>
    <script type="text/javascript">
        window.onload = function(){
            /*轮播区域*/
            var bannerArea = document.querySelector('.banner-area');
            /*图片容器*/
            var imgArea = document.querySelector('.banner-area>ul');
            /*图片列表*/
            var imgList = document.querySelectorAll('.banner-area>ul>li');
            /*焦点列表*/
            var focusList = document.querySelectorAll('.banner-area>ol>li')
            /*切换按钮*/
            var prev = document.querySelector('.prev');
            var next = document.querySelector('.next');
            /*初始焦点激活*/
            var _index = 1;
            /*事件绑定*/
            next.onclick = function(){
                animateImg(-600)
                _index++
                animateFocus()
            }
            prev.onclick = function(){
                animateImg(600)
                _index--
                animateFocus()
            }
            /*图片切换*/
            function animateImg(option){
                var imgAreaLeft = parseInt(imgArea.style.left) + option;
                imgArea.style.left = imgAreaLeft + 'px';
                if( imgAreaLeft> -600){
                    imgArea.style.left = -3000 + 'px';
                }
                if(imgAreaLeft < -3000){
                    imgArea.style.left = -600 + 'px';
                }
            }
            /*焦点切换*/
            function animateFocus(){
                if(_index>5){_index = 1;}
                if(_index<1){_index = 5;}
                focusList.forEach(function(item){
                    item.className = '';
                })
                focusList[_index - 1].className = 'focus-active';
            }
            /*焦点点击绑定*/
            for(let i=0;i<focusList.length;i++){
                focusList[i].onclick = function(){
                    var clickIndex = parseInt(this.dataset.index);/*点击点的索引*/
                    var offsetLeft = -600 * (clickIndex - _index);
                    _index = clickIndex;/*重置焦点索引*/
                    animateImg(offsetLeft);/*切换图片*/
                    animateFocus()/*焦点切换*/
                }
            }
        }   
    </script>
</body>
</html>

（7）优化+调试

（8）JS运动动画函数

（9）性能优化

动画过程中不再接受任何操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .banner-area{
             600px;
            height: 300px;
            border:1px solid;
            margin: 10px auto;
            position: relative;
            overflow: hidden;
        }
        .banner-area ul{
             4200px;
            height: inherit;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
        }
        .banner-area ul li{
             600px;
            height: 300px;
            float: left;
        }
        .banner-area ul li img{
            display: block;
             inherit;
            height: inherit;
        }
        .prev,.next{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
             50px;
            height: 50px;
            background: rgba(0,0,0,.3);
            color: white;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            z-index: 2;
        }
        .prev{
            left: 20px
        }
        .next{
            right: 20px;
        }
        .banner-area ol{
             200px;
            height: 30px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 10px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 2;
        }
        .banner-area ol li{
             16px;
            height: 16px;
            background: rgba(0,0,0,.4);
            border-radius: 50%;
            cursor: pointer;
        }
        .banner-area ol li.focus-active{
            background: rgba(0,0,0,0.8);
        }
    </style>
</head>
<body>
    <div class="banner-area">
        <ul style="left: -600px">
            <li><img src="imgs/05.jpg"></li>
            <li><img src="imgs/01.jpg"></li>
            <li><img src="imgs/02.jpg"></li>
            <li><img src="imgs/03.jpg"></li>
            <li><img src="imgs/04.jpg"></li>
            <li><img src="imgs/05.jpg"></li>
            <li><img src="imgs/01.jpg"></li>
        </ul>
        <ol>
            <li data-index="1" class="focus-active"></li>
            <li data-index="2"></li>
            <li data-index="3"></li>
            <li data-index="4"></li>
            <li data-index="5"></li>
        </ol>
        <a href="javascript:;" class="prev">&lt;</a>
        <a href="javascript:;" class="next">&gt;</a>
    </div>
    <script type="text/javascript">
        window.onload = function(){
            /*轮播区域*/
            var bannerArea = document.querySelector('.banner-area');
            /*图片容器*/
            var imgArea = document.querySelector('.banner-area>ul');
            /*图片列表*/
            var imgList = document.querySelectorAll('.banner-area>ul>li');
            /*焦点列表*/
            var focusList = document.querySelectorAll('.banner-area>ol>li')
            /*切换按钮*/
            var prev = document.querySelector('.prev');
            var next = document.querySelector('.next');
            /*初始焦点激活*/
            var _index = 1;
            /*初始动画状态-优化*/
            var animateStatus = false;
            /*事件绑定*/
            next.onclick = function(){
                if(!animateStatus){
                    animateImg(-600)
                    _index++
                    animateFocus()
                }
            }
            prev.onclick = function(){
                if(!animateStatus){
                    animateImg(600)
                    _index--
                    animateFocus()
                }
            }
            /*图片切换*/
            function animateImg(option){
                animateStatus = true;
                var imgAreaLeft = parseInt(imgArea.style.left) + option;
                /*切换动画*/
                var timer = 300;//位移总时间
                var interval = 30;//位移间隔时间
                var speed = option/(timer/interval);//每次位移量
                function go(){
                    if( speed < 0 && parseInt(imgArea.style.left) > imgAreaLeft || speed > 0 && parseInt(imgArea.style.left) < imgAreaLeft){
                        imgArea.style.left = parseInt(imgArea.style.left) + speed + 'px';
                        setTimeout(go,interval)
                    }else{
                        animateStatus = false;
                        imgArea.style.left = imgAreaLeft + 'px';
                        if( imgAreaLeft> -600){
                            imgArea.style.left = -3000 + 'px';
                        }
                        if(imgAreaLeft < -3000){
                            imgArea.style.left = -600 + 'px';
                        }
                    }
                }
                go()
                
            }
            /*焦点切换*/
            function animateFocus(){
                /*性能优化：点击激活点不再调用，可以结合debugger进行调试*/
                if(this.className === 'focus-active'){
                    return;
                }
                if(_index>5){_index = 1;}
                if(_index<1){_index = 5;}
                focusList.forEach(function(item){
                    item.className = '';
                })
                focusList[_index - 1].className = 'focus-active';
            }
            /*焦点点击绑定*/
            for(let i=0;i<focusList.length;i++){
                focusList[i].onclick = function(){
                    var clickIndex = parseInt(this.dataset.index);/*点击点的索引*/
                    var offsetLeft = -600 * (clickIndex - _index);
                    _index = clickIndex;/*重置焦点索引*/
                    animateImg(offsetLeft);/*切换图片*/
                    animateFocus()/*焦点切换*/
                    /*debugger;断点调试*/
                }
            }
        }   
    </script>
</body>
</html>

此时就完成了切换

相关阅读:
C#网络安全的一个不错的站点
 SP2已经发布，明天MS要发布一个Exchange的package
Python学习足迹(3)
用例子来彻底搞明白Virtual 和非 virtual(C#)
概述Web编程的安全极其防护措施（主要针对PHP,PERL）[]
Java序列化
 Mybatis缓存及原理
 代理模式
 Spring的依赖注入
 Mybatis运行流程
原文地址：https://www.cnblogs.com/fightjianxian/p/12078825.html