原生js 轮播图

功能：

自动轮播
箭头向左向右切换
小圆点点击切换

html:

<!doctype html>

<html>
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/index.css"/> 
    <script src="js/index.js" type="text/javascript" > </script>
</head>
<body>
    <div id="container">
        <ul id="banner">
            <li>
                <a href="#">
                    <img src = "img/5.jpeg" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src = "img/1.jpg" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src = "img/2.jpg" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src = "img/3.jpg" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src = "img/4.jpg" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src = "img/5.jpeg" />
                </a>
            </li> 
            <li>
                <a href="#">
                    <img src = "img/1.jpg" />
                </a>
            </li>            
        </ul>
        
        <div id = "dots">
            <span class = "current"></span>
            <span ></span>
            <span ></span>
            <span ></span>
            <span ></span>
        </div>
        
        <a href="javascript:;" id="prev" class="arrow">&lt;</a>
        <a href="javascript:;" id="next" class="arrow">&gt;</a>
    </div>
    
    
</body>
</html>

css:

/* 父容器设置为相对定位，方便后面的小圆点和箭头布局， 子绝父相*/
#container{
    position: relative;
}

#banner,
#banner li{
    list-style:none;
    margin: 0;
    padding: 0;
}

#banner{
    position: absolute;
}

#banner li{
    float: left;
}

#banner li img{
    display:block;
}

#dots{
    position: absolute;
    bottom: 20px;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
}

#dots span{
    cursor: pointer;
    float: left;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #333;
    margin-right: 5px;
}

#dots .current{
    background: orangered;
}

.arrow{
    cursor: pointer;
    display: none;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    width: 40px;
    position: absolute;
    z-index: 2;
    top: 50%;
    transform:translateY(-50%);
    background: rgba(0,0,0,.3);
    color: #fff;
}

#prev{
    left: 20px;
}

#next{
    right: 20px;
}

#container:hover .arrow{
    display: block;
}

js:


window.onload = function(){
    var container = document.getElementById("container");
    var banner = document.getElementById("banner");
    var imgBoxs = document.querySelectorAll("#banner li");
    var imgs = document.querySelectorAll("#banner img");
    var img = imgs[0];
    var imgW = img.offsetWidth;
    var imgH = img.offsetHeight;
    
    /* 设置最外层盒子的高宽 */
    container.style.width = imgW + "px";
    container.style.height = imgH + "px";
    container.style.overflow = "hidden";
    
    banner.style.height = imgH + "px";
    banner.style.width = imgW * imgBoxs.length + "px";
    banner.style.left = - imgW + "px";
        
    
    var prev = document.getElementById("prev");
    var next = document.getElementById("next");
    
    var currentIndex = 1;// currentIndex : 1, 2 ... , imgBoxs.length - 2
    
    prev.onclick = function(){
        currentIndex --;
        animate(banner, - currentIndex * imgW, imgW, imgBoxs.length);
        
        if(currentIndex == 0){
            currentIndex = imgBoxs.length - 2;     
        }
        
        setCurrentButtonStyle(currentIndex - 1);
    }
    
    next.onclick = function(){
        currentIndex ++;
        animate(banner, - currentIndex * imgW, imgW, imgBoxs.length);
        
        if(currentIndex == imgBoxs.length - 1){
            currentIndex = 1;
        } 
        
        setCurrentButtonStyle(currentIndex - 1);
    }
     
    function setCurrentButtonStyle(index){ 
        var spans = document.querySelectorAll("#dots span");
        for(var i = 0; i < spans.length; i++){
            spans[i].className = "";
        } 
        
        spans[index].className = "current";
    }
    
    var spans = document.querySelectorAll("#dots span");
    for(var i = 0; i < spans.length; i++){
        spans[i].index = i;//缓存i
        spans[i].onclick = function(){
            currentIndex = this.index + 1;
            animate(banner, - currentIndex * imgW);
            setCurrentButtonStyle(this.index);               
        }
    }
    
    /* 开启自动轮播 */
    var autoTimer = setInterval(function(){               
        next.click();
    }, 2000);

    container.onmouseover = function(){
        clearInterval(autoTimer);
        autoTimer = null;
    }
    
    container.onmouseout = function(){
        autoTimer = setInterval(function(){               
            next.click();
        }, 2000);
    }
          
    
    // 图片顺序：5 1 2 3 4 5 1
    // 假的第一张：left = - imgW * (len - 1)
    // 假的最后一张： left = 0
    // next: 开始过渡到假的第一张时，开启和过渡时长相等的定时器， 过渡完成立即设置left为真的第一张上
    // prev:  开始过渡到假的最后一张时，开启和过渡时长相等的定时器， 过渡完成立即设置left为真的最后一张上
    //tansition 有坑，只对首尾状态有效，不能再一个函数内先取消动画，再开启，所以借助定时器
    function animate(element, leftTarget, imgW, len){
        element.style.transition = "left 0.5s linear";
        element.style.left = leftTarget + "px";
        if(leftTarget == (- imgW * (len - 1))){//next
            setTimeout(function(){
                element.style.transition = "left 0s linear";
                element.style.left = - imgW + "px";
            }, 500);
        }else if(leftTarget == 0){//prev
            setTimeout(function(){
                element.style.transition = "left 0s linear";
                element.style.left = - imgW * (len - 2) + "px";
            }, 500);
        }
    }
 
}

原生js 轮播图

功能：

zeroyl

引用和评论

scratch 工作区间变量意思

Vue.js-Vue实例

2025年最新反编译微信小程序的教程及工具

你可能不知道的图片加载相关知识

使用CSS给标题添加书名号并超出省略

原生electron起步-从零到一完成构建和打包

Base64编码的“暗坑”：解密失败？可能是这些原因！