在这里插入图片描述
原生JS无缝轮播图（左右切换、导航图标）

功能：
1、实现轮播图的左右无缝切换
2、实现导航图标的跟随显示、点击切换
3、使用定时器进行无缝轮播

css部分


<style>
        /* 轮播图容器 */
        #carousel{
            width: 800px;
            height: 400px;
            border: 2px solid brown;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            overflow: hidden;
        }
        /* 轮播图图片内容 */
        #list{
            height: 400px;
            width: 9999px;
            position: relative;
        }
        #list > img{
            width:800px;
            height: 100%;
            display: block;
            float: left;
        }

        /* 轮播图导航按钮 */
        #slider_nav{
           width: 100%;
            position: absolute;
            bottom: 30px;
            display: flex;
            justify-content: center;
        }
        #slider_nav > span {
            width: 40px;
            height: 4px;
            display: block;
            margin: 0 4px 0 4px;
            float: left;
            background-color: rgba(0,0,0,0.4);
            cursor: pointer;
        }
       /* 导航按钮活动样式*/
        #slider_nav .active{
            background-color: orangered;
        }

        /* 下一张、上一张按钮 */
        #prev,#next{
            width: 40px;
            height: 40px;
            display: block;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }    
        #prev{
            left: 20px;
            background-image: url(./iconImg/next.png);
            background-size: 40px   
        }
        #next{
            right: 20px;
            background-image: url(./iconImg/prev.png);
            background-size: 40px   
        }

html结构部分

<body>
    <div id="carousel">
    	<!-- 轮播内容 -->
        <div id="list" style="left: -800px">
            <img src="./images/img5.jpg" alt="">
            <img src="./images/img1.jpg" alt="">
            <img src="./images/img2.jpg" alt="">
            <img src="./images/img3.jpg" alt="">
            <img src="./images/img4.jpg" alt="">
            <img src="./images/img5.jpg" alt="">
            <img src="./images/img1.jpg" alt="">
        </div>
        <!-- 导航按钮 -->
        <div id="slider_nav">
            <span class='active'></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <!-- 下一张、上一张切换 -->
        <span id="prev"></span>
        <span id="next"></span>
    </div>
</body>

js部分

<script >
    window.onload=function(){
        var carousel=document.getElementById('carousel');
        var next=document.getElementById('next');
        var prev=document.getElementById('prev');
        var list=document.getElementById('list');
        var span=document.getElementById('slider_nav').getElementsByTagName('span');//获取span
        var spanIndex=1;//定义导航图标的下标
        var time;//定时器
    

        //    下一步
        next.onmousedown=function(){
            // 到达最后一张时跳回第一张
            if(parseInt(list.style.left)< -4000){
                    list.style.left = -800+'px'
                    list.style.transition=''
            }
            next.onmouseup=function() {
                list.style.left = parseInt(list.style.left)+ -800 +'px'
                list.style.transition='1000ms'
                // 轮播图导航按钮跟随部分
                if(spanIndex < 5){
                    spanIndex++
                }else{
                    spanIndex=1
                }
                for(var i = 0; i < span.length; i++){
                    span[i].className=''
                    span[spanIndex-1].className='active'
                    
                }
            
            }
                
            }
        // 上一步
        prev.onmousedown=function(){
            // 到达第一张时跳最后一张
            if(parseInt(list.style.left)> -800){
                list.style.left = -4000+'px'
                list.style.transition=''
            }
            prev.onmouseup=function(){
                list.style.left = parseInt(list.style.left)+ 800 +'px'
                list.style.transition='1000ms'

                // 轮播图导航按钮跟随部分
                if(spanIndex > 1){
                    spanIndex--
                }else{
                    spanIndex=5
                }
                for(var i = 0; i < span.length; i++){
                    span[i].className=''
                    span[spanIndex-1].className='active'
                    
                }
            }
        }
            
        // 轮播图导航按钮点击
        for(var i = 0; i < span.length; i++){
            span[i].index=i+1
            span[i].onclick=function(){
                for(var i = 0; i < span.length; i++){
                span[i].className=''
                this.className='active'
                }
                list.style.left = -800*this.index+'px' //点击导航按钮时跳到指定图片
                spanIndex=this.index//重新指定span的下标为当前所点击元素的下标
            }

        }

// 实现轮播图自动播放
        function play(){
            time=setInterval(function(){
                if( parseInt(list.style.left)> -4800){
                    list.style.left = parseInt(list.style.left)+ -800 +'px'
                    list.style.transition='1000ms'

                // 轮播图导航按钮跟随部分
                    if(spanIndex < 5){
                        spanIndex++
                    }else{
                        spanIndex=1
                    };
                    for(var i = 0; i < span.length; i++){
                        span[i].className=''
                        span[spanIndex-1].className='active'
                    };
                }else if(parseInt(list.style.left)< -4000){
                    list.style.left =  -800 +'px'
                    list.style.transition=''
                }
            },3000)
        }

        // 鼠标移入停止，移出播放
        play();//初始为自动播放
                
        // 鼠标移入清除定时器
        carousel.onmousemove=function(){
            clearInterval(time)
        }
        // 鼠标移出开启定时器
        carousel.onmouseout=function(){
            play()
        }
    }
</script>
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生