原生JS实现简单动态轮播（二）-优快云博客

本文详细介绍了如何使用HTML和CSS布局实现轮播图效果，重点在于通过设置ul宽度为图片总宽度的500%，并在轮播时移动ul的位置来实现无缝滚动。同时，文章提供了完整的JS代码，用于自动轮播、左右切换及分页指示等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：在这里插入图片描述
先看布局的代码：

    <div class="banner">
       <ul class="clear" style="left:-100%;" >
            <li><img src="yy.jpg"></li>
            <li><img src="3.jpg"></li>
            <li><img src="5.jpg"></li>
            <li><img src="yy.jpg"></li>
            <li><img src="3.jpg"></li>
        </ul>
        <div class="pageNav"></div>
        <div class="leftBtn"></div>
        <div class="rightBtn"></div>
    </div>

可以看出这个轮播和我的前一篇轮播，布局的思路稍微不同。无缝轮播只放需要的图片，轮播时所看到的两张图片的left都改变。而这个轮播是把ul的宽设为所有图片加起来的长度，轮播时移动ul的left，并在第一张图片前放置最后一张图片，最后一张图片后放置第一张图片。

布局大体也一样，就是重点便是ul设置为500%。

        .clear:after{
            display:block;
            content:"";
            clear:both;
        }
        .banner{
            position:relative;
            width: 100%;
            height: 500px;
            overflow:hidden;
        }
        .banner ul{
            list-style-type:none;
            position:relative;
            width: 500%;
            height:  500px;
        }
        .banner ul li{
            float: left;
            width: 20%;
        }
        .pageNav{
            position: absolute;
            left:50%;
            bottom:20px;
            transform: translateX(-50%);
        }
        .pageNav a{
            display:inline-block;
            margin:0 5px;
            width: 20px;
            height: 20px;
            background-color:#fff;
            border-radius:50%;
            border:2px solid #000;
            cursor:pointer;
        }
        .pageNav a.cur{
            background-color:red;
        }
        .leftBtn, .rightBtn{
            position:absolute;
            top: 50%;
            transform:translateY(-50%);
            width: 40px;
            height: 50px;
            background-color:rgba(0, 0, 0, 0.5);
            cursor:pointer;
        }
        .leftBtn{
            left:0;
        }
        .rightBtn{
            right:0;
        }
        .leftBtn:hover,.rightBtn:hover{
            background-color:rgba(0, 0, 0, 0.8);
        }

接下来是js部分，思路也很相似，移动的元素不一样。

//先获取所需要的dom元素
var banner=document.getElementsByClassName("banner")[0], ul=banner.getElementsByTagName("ul");[0]
var li=ul.getElementsByTagName("li");
var pageNav=banner.getElementsByClassName("pageNav")[0];
var leftBtn=banner.getElementsByClassName("leftBtn")[0],rightBtn=banner.getElementsByClassName("rightBtn")[0];
        var n=0,timerElem,animate=false;
//添加分页按钮
        for(var i=0;i<li.length-2;i++){
            var pageA=document.createElement("a");
            if(i==0){
                pageA.className="cur";
            }
            pageNav.appendChild(pageA);
        }
        pageNav.addEventListener('click',pageNavClick,false);
        function pageNavClick(e){
            e=e||window.event;//兼容性考虑
            for(var j=0;j<li.length-2;j++){
                if(pageNav.children[j]==e.target){
                    var offset=(j-n)*(-100);
                    btnShow(j);
                    n=j;
                    showImg(offset);
                }
            }
        }
 //分页按钮函数
        function btnShow(index){
            for(var a=0;a<li.length-2;a++){
                pageNav.children[a].className="";
            }
            pageNav.children[index].className="cur";
        }
        function showImg(offset){
            clearInterval(timerElem);//记得清除计时器，要不然多个计时器叠加，效果会出现问题。
            var speed=offset/20;
            var newLeft=parseInt(ul.style.left)+offset;
            timerElem=setInterval(function(){
                if(parseInt(ul.style.left)==newLeft){
                    clearInterval(timerElem);
                    // 当第三张开始滑动时，屏幕接着它滑动的是放置在它后面的假的第一张，所以滑动结束之后要把位置从转回真的第一张
                    if(n==0){
                            ul.style.left="-100%";
                        }else if(n==li.length-3){
                            ul.style.left=(-100)*(li.length-2)+"%";
                        }else{
                            ul.style.left=newLeft+"%";
                        }
                    animate=false;
                } else{
                    animate=true;
                     ul.style.left=parseInt(ul.style.left)+speed+"%";
                }
            },50)
        }
        rightBtn.onclick=function(){
            if(animate){
                return;
            }
            n++;
            if(n>=li.length-2){
                n=0;
            }
            btnShow(n);
            showImg(-100);
        }
        leftBtn.onclick=function(){
            if(animate){
                return;
            }
            n--;
            if(n<0){
                n=li.length-3;
            }
            btnShow(n);
            showImg(-100);
        }
        var timer=setInterval(autoLunbo,3000);
        function autoLunbo(){
            rightBtn.onclick();
        }
        banner.onmouseover=function(){
            clearInterval(timer);
        }
        banner.onmouseout=function(){
            timer=setInterval(autoLunbo,3000);
        }