原生JS无缝轮播图

其他 2019-12-22 02:00:57 阅读次数: 0

（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{
            width: 600px;
            height: 300px;
            border:1px solid;
            margin: 10px auto;
            position: relative;
            overflow: hidden;
        }
        .banner-area ul{
            width: 4200px;
            height: inherit;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
        }
        .banner-area ul li{
            width: 600px;
            height: 300px;
            float: left;
        }
        .banner-area ul li img{
            display: block;
            width: inherit;
            height: inherit;
        }
        .prev,.next{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 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{
            width: 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{
            width: 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{
            width: 600px;
            height: 300px;
            border:1px solid;
            margin: 10px auto;
            position: relative;
            overflow: hidden;
        }
        .banner-area ul{
            width: 4200px;
            height: inherit;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
        }
        .banner-area ul li{
            width: 600px;
            height: 300px;
            float: left;
        }
        .banner-area ul li img{
            display: block;
            width: inherit;
            height: inherit;
        }
        .prev,.next{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 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{
            width: 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{
            width: 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{
            width: 600px;
            height: 300px;
            border:1px solid;
            margin: 10px auto;
            position: relative;
            overflow: hidden;
        }
        .banner-area ul{
            width: 4200px;
            height: inherit;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
        }
        .banner-area ul li{
            width: 600px;
            height: 300px;
            float: left;
        }
        .banner-area ul li img{
            display: block;
            width: inherit;
            height: inherit;
        }
        .prev,.next{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 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{
            width: 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{
            width: 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{
            width: 600px;
            height: 300px;
            border:1px solid;
            margin: 10px auto;
            position: relative;
            overflow: hidden;
        }
        .banner-area ul{
            width: 4200px;
            height: inherit;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
        }
        .banner-area ul li{
            width: 600px;
            height: 300px;
            float: left;
        }
        .banner-area ul li img{
            display: block;
            width: inherit;
            height: inherit;
        }
        .prev,.next{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 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{
            width: 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{
            width: 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>

此时就完成了切换

.

.

猜你喜欢

转载自www.cnblogs.com/jianxian/p/12078825.html
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022