如何在html中实现一个轮播图效果

这期内容当中小编将会给大家带来有关如何在html中实现一个轮播图效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

专业领域包括成都网站制作、成都做网站、商城建设、微信营销、系统平台开发，与其他网站设计及系统开发公司不同，创新互联建站的整合解决方案结合了帮做网络品牌建设经验和互联网整合营销的理念，并将策略和执行紧密结合，为客户提供全网互联网整合方案。

html是什么

html的全称为超文本标记语言，它是一种标记语言，包含了一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体，html文本是由html命令组成的描述性文本，html命令可以说明文字，图形、动画、声音、表格、链接等，主要和css+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; i<len; 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中实现一个轮播图效果了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。

当前名称：如何在html中实现一个轮播图效果
本文地址：https://www.cdcxhl.com/article36/jisisg.html

成都网站建设公司_创新互联，为您提供响应式网站、电子商务、用户体验、定制网站、网站收录、微信公众号

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容