JavaScript-----轮播图案例展示

news2024/12/24 8:19:40

前言：

这一期我们去通过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);
};