Scribd Logo
Upload

Welcome to Scribd!

  • Silder

    Uploaded by

    fly4market
    4 views1 page
    This document contains code for an automatic slideshow that displays three images sequentially. It uses JavaScript to change the display style of each image class every 4 seconds, creating a slideshow effect. The slideshow is centered on the page with a heading of "Automatic Slideshow".

    Original Description:

    sider

    Original Title

    silder

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains code for an automatic slideshow that displays three images sequentially. It uses JavaScript to change the display style of each image class every 4 seconds, creating a slideshow effect. The slideshow is centered on the page with a heading of "Automatic Slideshow".

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    4 views1 page

    Silder

    Uploaded by

    fly4market
    This document contains code for an automatic slideshow that displays three images sequentially. It uses JavaScript to change the display style of each image class every 4 seconds, creating a slideshow effect. The slideshow is centered on the page with a heading of "Automatic Slideshow".

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 1

    <!

    DOCTYPE html>
    <html>

    <head>
    <title>W3.CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <style>
    .mySlides {display:none;}
    </style>
    </head>

    <body>

    <h2 class="w3-center">Automatic Slideshow</h2>

    <div class="w3-content w3-section" style="max-width:80%">


    <img class="mySlides" src="pic1.jpg" style="width:100%">
    <img class="mySlides" src="pic2.jpg" style="width:100%">
    <img class="mySlides" src="pic3.jpg" style="width:100%">
    </div>

    <script>
    var myIndex = 0;
    carousel();

    function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}
    x[myIndex-1].style.display = "block";
    setTimeout(carousel, 4000); // Change image every 2 seconds
    }
    </script>

    </body>
    </html>

    You might also like