计时器轮播图

使用javascript实现轮播图

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style type="text/css">

        .imgBox{
            
            width: 100%;
            height: 250px;
            margin: 0 auto;

        }

        .imgBox img{
            width: 50%;
            height: 400px;
            margin: 0 auto;
            padding-top: 30px;

        }

        .img1{
            display: block;
        }

        .img2{
            display: none;
        }

        .img3{
            display: none;
        }
    style>
head>
<body>

<div class="imgBox">
    <img class="img-slide img1" src="./111.jpg" alt="1">
    <img class="img-slide img2" src="./222.jpg" alt="2">
    <img class="img-slide img3" src="./333.jpg" alt="3">
div>
body>
<script type="text/javascript">
    var index=0;
    //效果
    function ChangeImg() {
        index++;
        var a=document.getElementsByClassName("img-slide");
        if(index>=a.length) index=0;
        for(var i=0;i<a.length;i++){
            a[i].style.display='none';
        }
        a[index].style.display='block';
    }
    //设置定时器,每隔三秒切换一张图片
    setInterval(ChangeImg,3000);
script>
html>


效果图:
计时器轮播图_第1张图片

计时器轮播图_第2张图片

你可能感兴趣的:(javascript,html,前端)