html图片轮播原理-文案馆

html图片轮播原理

将军 • 2020年9月6日 09:08:55 • 文案

图片轮播是怎么做的呢？

素材：你要轮流播放的图片1，图片2，图片3，。。。

代码：

要怎么实现图片轮播呢？

图片是怎么放到网上的呢？

使用<img>标签

这个标签里面可以放1张图片，

在一个时间间隔之后，

改变为另外一张图片。

怎么更改<img>标签内容呢？

怎么停留一段时间间隔呢？

setInterval(ChangeImg,2000);

使用这个函数，可以每隔2秒就调用ChangeImg函数，实现停留一段间隔。

怎么更改图片内容呢？

如果图片刚开始播放图片1

怎么换到图片2，图片3呢

首先，要获得所有的图片，所有的图片放入一个集合里面。

然后按下标顺序显示图片。

下标从0开始，先显示下标为0的图片，

隔了1段时间，再显示下标是1的图片，

依次实现轮播。

代码：

<html>

<script type="text/javascript">

ps=new Array("hua1.jpg","hua2.jpg","a.jpeg","hua3.jpg");

var i=0;
function hanshu()
{
   i++;
  
   if(i>=ps.length)
     i=0;
    document.getElementById("tu").src=ps[i];
  
}

setInterval(hanshu,1000);
</script>

<img  id="tu" width=300px height=200px></img>
</html>

还有一个方法：

参考：

<!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="hua1.jpg" alt="1">
    <img class="img-slide img2" src="a.jpeg" alt="2">
    <img class="img-slide img3" src="hua2.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>

读者可以比较2份代码，从中体会学习。

本文来自投稿，不代表文案馆立场，如若转载，请注明出处：https://wpbbw.com/2873.html

html图片轮播原理

相关推荐