html + js 简单实现轮播图 - 唔雨同学

html + js 简单实现轮播图

标签:

htmlcss网站js

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

 

实现思路如下:

  1. 设置所有图片的 display 属性为 none
  2. 设置一个 index 用来标志获取到的图片
  3. 设置一个定时器,每隔一段时间令 index 自增并将对应的图片的 display 属性改为 block

附上代码:



作者:Game0ver
链接:https://www.jianshu.com/p/f84b76b67e86
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图实现</title>
    <style type="text/css">

        /*标题样式*/
        p{
            text-align: center;
            font-size: 25px;
            color: cadetblue;
            font-family: fantasy;

        }

        .imgBox{
            border-top: 2px solid cadetblue;
            width: 50%;
            height: 500px;
            margin: 0 auto;

        }

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

        }

        .img1{
            display: block;
        }

        .img2{
            display: none;
        }

        .img3{
            display: none;
        }
    </style>
</head>
<body>
<p>图片轮播</p>
<div class="imgBox">
    <img class="img-slide img1" src="images/1.jpg" alt="1">
    <img class="img-slide img2" src="images/2.jpg" alt="2">
    <img class="img-slide img3" src="images/3.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,2000);
</script>
</html>

 

 

 

 

 

分享到:
未经允许不得转载:

作者: 唔雨, 转载或复制请以 超链接形式 并注明出处 唔雨同学
原文地址: 《html + js 简单实现轮播图》 发布于2020-5-20

评论

未显示?请点击刷新
切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏