JavaScript-----轮播图案例展示-Toy模板网

这篇具有很好参考价值的文章主要介绍了JavaScript-----轮播图案例展示。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言：

这一期我们去通过JavaScript的代码实现轮播图的制作，下面有效果展示和代码资源，其中的图片资源和代码资源我都上传上去了，如果需要运行的话，你们可以去直接下载下来。希望各位喜欢！

效果展示

1694164869515

功能说明：这个轮播图可以自动轮播（周期2秒），可以点击向左和向右进行图片切换，还可以去点击下面的小圆点去直接切换到想要的图片。

其中的向左和向右的按键是可以去通过阿里巴巴矢量图库去直接下载的

代码

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
    <div class="box">
        <ul class="list">
            <li><img src="../../image/t01164c857e5ef6a87b.jpg" alt="" width="1000px" height="620px"></li>
            <li><img src="../../image/fa3dfe8a37336b982fdda9eeebdae5180fce177a.jpg" alt="" width="1000px" height="620px"></li>
            <li><img src="../../image/bba7df2327d4bfca9b6353ecdace295251f0e622.png" alt="" width="1000px" height="620px"></li>
        </ul>
        <div class="left btn">
            <i class="iconfont icon-xiangzuo1"></i>
        </div>
        <div class="right btn">
            <i class="iconfont icon-xiangyou1"></i>
        </div>
        <div class="page">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script async src="./index.js"></script>

</body>
</html>

CSS代码

*{
    margin: 0;
    padding: 0;
}
.box
{
    margin: 100px auto;
    height: 620px;
    width: 1000px;
    overflow: hidden;
    border: 1px solid red;
    position: relative;
}
ul>li{
    list-style: none;

}
.left,.right{
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50%;
    margin-top:-10px ;
}
.left{
    left: 20px;
}
.right{
    right: 20px;
}
.btn i{
    color: #a69d9d;
    font-size: 63px;
}
.page{
    display: flex;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -50.5px;
}
.page span{
    display: block;
    background-color: #e1c8c8;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-left: 25px;
}

JavaScript代码

//注意当前元素是第几个
let img=0;//默认第一个 0 1 2

let left=document.getElementsByClassName('left')[0];
let right=document.getElementsByClassName('right')[0];
let list_span=document.querySelectorAll('.page span');
let list_img=document.querySelectorAll('.list img')
let box=document.getElementsByClassName('box')[0];
left.onclick=function(){
    img--;
    if(img<0){
        //当图片下标小于0，就回到第三张图
        img=2;
    }
    show(img);
}
right.onclick=function(){
    img++;
    if(img>2){
        //如果当图片下标大于2，就回到第一个图片
        img=0;        
    }
    show(img);
}
//初始化(默认显示第一张图片)
list_span[img].style.background='yellow';

//展示当前的图片
function show(index){
    for (let i=0;i<list_img.length;i++){
        list_img[i].style.display='none';
        list_span[i].style.background='#e1c8c8';
    }
    //显示当前的图片和下标
        list_img[index].style.display='block';
        list_span[index].style.background='yellow';
}

//小圆点按钮点击换图
for(let j=0;j<3;j++){
    list_span[j].onclick=function(){
        img=j;
        show(img);
    }
}

// 自动轮播图片(定时器)
let time=setInterval(function(){
    right.onclick();

},2000);//两秒钟换一张图片
//鼠标移入就暂停
box.onmouseover=function(){
    clearInterval(time);
};
//鼠标移出就继续轮播
box.onmouseout=function(){
    time=setInterval(function(){
        right.onclick();
    },2000);
};