How to implement html carousel chart-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to implement html carousel chart

coldplay.xixi

Mar 04, 2021 pm 05:03 PM

htmlcarousel

How to implement the html carousel image: first use a control as the image display area, and the images are displayed in the same area; then write a traversal function through Js to display only one image at a time; finally Just call this function every once in a while through a timer.

How to implement html carousel chart

The operating environment of this tutorial: windows7 system, html5 version, DELL G3 computer.

How to implement html carousel images:

1. Use a control as the image display area, and the images are displayed in the same area;

2. Write a traversal function through Js to display only one picture at a time, such as style = " display: none " You can hide other pictures;

3. Through a timer Call this function every once in a while;

4. The pictures tested here are manually added addresses, which can be added cyclically according to actual needs;

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 lazy"  src="/static/imghwm/default1.png"  data-src="img/img1.jpg"    alt="img1">
            <img class="img-slide img lazy"  src="/static/imghwm/default1.png"  data-src="img/img2.jpg"    alt="img2">
            <img class="img-slide img lazy"  src="/static/imghwm/default1.png"  data-src="img/img3.jpg"    alt="img3">
            <img class="img-slide img lazy"  src="/static/imghwm/default1.png"  data-src="img/img4.jpg"    alt="img4">
            <img class="img-slide img lazy"  src="/static/imghwm/default1.png"  data-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;
}

Running effect:

How to implement html carousel chart

Related learning recommendations: html video tutorial

The above is the detailed content of How to implement html carousel chart. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

HTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AM

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

Understanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

The Role of HTML: Structuring Web ContentApr 11, 2025 am 12:12 AM

The role of HTML is to define the structure and content of a web page through tags and attributes. 1. HTML organizes content through tags such as , making it easy to read and understand. 2. Use semantic tags such as, etc. to enhance accessibility and SEO. 3. Optimizing HTML code can improve web page loading speed and user experience.

HTML and Code: A Closer Look at the TerminologyApr 10, 2025 am 09:28 AM

HTMLisaspecifictypeofcodefocusedonstructuringwebcontent,while"code"broadlyincludeslanguageslikeJavaScriptandPythonforfunctionality.1)HTMLdefineswebpagestructureusingtags.2)"Code"encompassesawiderrangeoflanguagesforlogicandinteract

HTML, CSS, and JavaScript: Essential Tools for Web DevelopersApr 09, 2025 am 12:12 AM

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

See all articles