JS轮播图带序号小点和左右按钮

阅读原文时间：2023年07月10日阅读：1

轮播图作为前端比较简易的动画，使用非常频繁，这里记录以便使用

此轮播图为最简易自动播放，非无缝，但有按钮，有序号跳转小点

想看全套轮播图可以查看我的分类轮播图全套

html布局

《

》

<div id="dian">  
    <div style="width:230px; margin: auto; height: 30px;">  

css样式

    \*{  
    margin: 0 auto;  
    padding: 0 auto;  
}  
.tu{  
    float: left;0  
    width: 100%;  
    display: none;  
}  
.tu img{  
    width: 100%;  
}  
#zuo{  
    position: absolute;  
    top: 300px;  
    background-color: rgba(255,255,255,0.50);  
    width: 40px;  
    height: 40px;  
}  
#you{  
    position: absolute;  
    top: 300px;  
    background-color: rgba(255,255,255,0.50);  
    width: 40px;  
    height: 40px;  
    right: 5px;  
}

#dian{  
    text-align: center;  
    position: relative;  
    top: -60px;  
}

.dian{  
    float: left;  
    border: 1px solid rgba(255,255,255,1.00);  
    border-radius: 30px;  
    width: 30px;  
    height: 30px;  
    margin-left: 5px;  
    background-color: rgba(0,0,0,1.00);  
}

同样布局不用要完全可以自己布局，下面看js

　　 var jishu=0; //记录到第几张
var tu; //接收图片的dom
var dian; //接收小点dom
// 自己播放函数，不懂请看轮播图全套里 JS最通俗易懂简易轮播实现
function aaa(){
tu =document.getElementsByClassName("tu");
dian =document.getElementsByClassName("dian");

    //显示当前隐藏其他  
    for(var a=0;a<tu.length;a++){  
        if(a==jishu){  
            tu\[jishu\].style.display="block";  
            dian\[jishu\].style.border="1px solid rgba(255,0,4,1.00)";  
            dian\[jishu\].style.backgroundColor = "white";  
        }else{  
            tu\[a\].style.display="none";  
            dian\[a\].style.border="1px solid rgba(255,255,255,1.00)";  
            dian\[a\].style.backgroundColor = "black";  
        }  
    }  
    //到最后一张回到第一张  
    if(jishu>tu.length-2){  
        jishu=0;  
    }else{  
        jishu++;  
    }

}  
aaa();  
var dong = setInterval("aaa()",2000);  

// 切换上一张和下一张
function huan(data){
// 先暂停，防止出现手动切换和自动切换重叠
clearInterval(dong);
// 判断实参
if(data=="zuo"){
// jishu<=1请情况有两种，0和1
if(jishu<=1){
　　// 如果是0那么当前显示的是第6张，请结合上面jishu清零语句
　　if(jishu==0){
　　// 那么jishu=4就是显示 第五张
　　jishu=4;
　　}else{
　　// 否则jishu=1时，显示的是第一张，结合上面jishu+1操作，jishu=5就是显示第六张
　　jishu=5;
　　}
　　
}else{
　　// 此处否则 显示上一张，此处需要-2因为每次运行完jishu都会多加1
jishu=jishu-2;
}

    }else{  

　　// 否则 此处是向右滚动，向左判断完成后，向右只考虑最后一张的情况。jishu=6时显示的是五张，再点击一次需要回到第一张
if(jishu>=6){
jishu=0;
}
}
　　// 判断完运行左还是右之后重新调用函数即可
aaa();
dong = setInterval("aaa()",2000);
}
//
// 小点翻页
function dianji(data){
clearInterval(dong);
　　// 参考html代码中，给此函数的实参
jishu = data;

    aaa();  
    dong = setInterval("aaa()",2000);  
}