HTMLカルーセルチャートの実装方法-htmlチュートリアル-php.cn

HTMLカルーセルチャートの実装方法

coldplay.xixi

リリース： 2023-01-03 09:27:46

オリジナル

67123 人が閲覧しました

HTML カルーセル画像の実装方法: 最初にコントロールを画像表示領域として使用し、画像は同じ領域に表示されます。次に、Js を介して一度に 1 つの画像のみを表示するトラバーサル関数を記述します。最後に、タイマーを通じてこの関数を時々呼び出すだけです。

HTMLカルーセルチャートの実装方法

#このチュートリアルの動作環境: Windows7 システム、html5 バージョン、DELL G3 コンピューター。

HTML カルーセル画像の実装方法:

1. コントロールを画像表示領域として使用すると、画像は同じ領域に表示されます。

style = " display: none " のように、一度に 1 つの画像だけを表示するトラバーサル関数を Js を介して作成します。他の画像を非表示にすることもできます。

3. timer この関数を時々呼び出します;

4. ここでテストした画像は手動で追加されたアドレスであり、実際のニーズに応じて周期的に追加できます;

Html、JavaScript:

<!-- 语言: Html、Css、Javascript -->
<!-- 工具: HbuilderX -->
<!-- 使用Ctrl+/ 可快速多行注释/取消注释 -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>轮播图测试</title>
    <!-- 外部导入Css文件，链接式 -->
    <link type="text/css" rel="stylesheet" href="css/slideShow.css"/>    
    </head>
    
    <body>
        <p>测试轮播图</p>
        <hr id="hr1"/>
        <!-- 建立一个div控件作为图片框 -->
        <div class="imgBox">
            <!-- alt：图片路径失败时替换显示内容 -->
            <img class="img-slide img" src="img/img1.jpg" alt="img1">
            <img class="img-slide img" src="img/img2.jpg" alt="img2">
            <img class="img-slide img" src="img/img3.jpg" alt="img3">
            <img class="img-slide img" src="img/img4.jpg" alt="img4">
            <img class="img-slide img" src="img/img5.jpg" alt="img5">
        </div>
    </body>
    
    <script type="text/javascript">
        // index：索引， len：长度
        var index = 0, len;
        // 类似获取一个元素数组
        var imgBox = document.getElementsByClassName("img-slide");
        len = imgBox.length;
        imgBox[index].style.display = &#39;block&#39;;
        // 逻辑控制函数
        function slideShow() {
            index ++;
            // 防止数组溢出
            if(index >= len) index = 0;
            // 遍历每一个元素
            for(var i=0; i<len; i++) {
                imgBox[i].style.display = &#39;none&#39;;
            }
            // 每次只有一张图片显示
            imgBox[index].style.display = &#39;block&#39;;
        }
        
        // 定时器，间隔3s切换图片
        setInterval(slideShow, 3000);
        
    </script>
    
</html>

ログイン後にコピー

CSS:

/* 标签选择器 */
p {
    text-align: center;
    font-size: 25px;
    color: cadetblue;
    font-family: fantasy;
}
/* id选择器 */
#hr1 {
    background-color: cadetblue;
    height: 2px;
    width: 75%;
}
/* 类选择器 */
.imgbox {
    border-top: 5px solid cadetblue;
    /* 避免因窗口变化影响图片效果 */
    width: 60%;
    height: 40%;
    margin: 0 auto;
}
.img {
    width: 60%;
    height: 40%;
    margin: 0 auto;
    display: none;
}

ログイン後にコピー

ランニング効果:

HTMLカルーセルチャートの実装方法