JavaScript-----Carousel chart case display

Foreword:

In this issue, we will use JavaScript code to create carousel images. Below are the effect displays and code resources. I have uploaded the image resources and code resources. If you need to run them, you can download them directly. Hope you all like it!

Show results

1694164869515

Function description : This carousel image can be automatically rotated (cycle 2 seconds). You can click left and right to switch pictures. You can also click the small dot below to switch directly to the desired picture.

The left and right buttons can be downloaded directly through the Alibaba vector library.

code

html code

<!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 code

*{
    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 code

//注意当前元素是第几个
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);
};

General idea

Realize static layout through html and CSS. After building the framework of the web page, use JavaScript to realize the dynamic effects of periodic automatic carousel, left and right switching, and click switching.

Okay, that’s all for this issue, see you in the next one!

Share a wallpaper: