原生JS无缝轮播图（左右切换、导航跟随）

最新推荐文章于 2024-10-12 10:48:21 发布

shi__Yu

最新推荐文章于 2024-10-12 10:48:21 发布

阅读量4.9k

点赞数 18

文章标签：原生JS无缝轮播

本文链接：https://blog.csdn.net/shi__Yu/article/details/94919343

版权

在这里插入图片描述
原生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>