html轮播图如何实现

htML轮播图的实现方法：首先使用一个控件作为图片显示区域，且图片都在相同的区域显示；然后通过JS写个遍历函数，每次只让一张图片显示；最后通过定时器每隔一段时间调用该函数即可。

本教程操作环境：windows7系统、html5版，DELL G3电脑。

html轮播图的实现方法：

1、使用一个控件作为图片显示区域，且图片都在相同的区域显示；

2、通过Js写个遍历函数，每次只让一张图片显示，如style = " display：none "可以影藏其他图片；

3、通过定时器每隔一段时间调用该函数；

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 = 'block';
        // 逻辑控制函数        function slideShow() {
                index ++;
                // 防止数组溢出            if(index >
    = len) index = 0;
                // 遍历每一个元素            for(var i=0;
     ilen;
 i++) {
                    imgBox[i].style.display = 'none';
            }
                // 每次只有一张图片显示            imgBox[index].style.display = 'block';
        }
                    // 定时器，间隔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视频教程

以上就是html轮播图如何实现的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！