html图片轮播原理

图片轮播是怎么做的呢?

素材:你要轮流播放的图片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份代码,从中体会学习。

原创文章,作者:27149,如若转载,请注明出处:http://wpbbw.com/2873.html

发表评论

登录后才能评论