JavaScript-----カルーセルチャートケース表示

序文：

今回は、JavaScript コードを使用してカルーセル画像を作成します。以下にエフェクト表示とコードリソースを示します。画像リソースとコードリソースをアップロードしました。実行する必要がある場合は、直接ダウンロードできます。皆さんも気に入っていただければ幸いです!

結果を示す

1694164869515

機能説明: このカルーセル画像は自動回転(2秒周期)でき、左右クリックで画像が切り替わり、下の小さな点をクリックすると直接希望画像に切り替わります。

左右のボタンは、Alibaba ベクターライブラリから直接ダウンロードできます。

コード

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);
};

一般的なアイデア

htmlとCSSで静的なレイアウトを実現 Webページの枠組みを構築した後、JavaScriptを使用して定期的な自動カルーセルや左右切り替え、クリック切り替えなどの動的な効果を実現します。

さて、今回はこれで終わりです。また次の号でお会いしましょう。

壁紙を共有する:

JavaScript-----カルーセルチャートケース表示

序文：

結果を示す

コード

htmlコード

CSSコード

JavaScriptコード

一般的なアイデア

おすすめ