最简单的图片轮播

最新推荐文章于 2024-04-15 10:28:24 发布

莓莓儿～

最新推荐文章于 2024-04-15 10:28:24 发布

阅读量1.4k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/fanfan_h/article/details/91138721

版权

JS 专栏收录该内容

49 篇文章 9 订阅

订阅专栏

声明一个变量用来存放多张图片的名称，

   var imglist=["3.jpg","2.jpg","8.jpg","6.jpg","1.jpg","4.jpg","7.jpg","5.jpg"];

主要就运用一个循环播放的函数setinterval(),
让图片的地址一秒一秒的变换，当变换到最后一张图片时，进行判断，让图片的索引为0，就完成了图片轮播。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .first{
            width:500px;
            height:300px;
            margin:auto;
            border:1px solid black;
        }
        .first>img{
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
<div class="first">
    <img class="image" src="./img/3.jpg " alt=""/>
</div>
<script>
   var imglist=["3.jpg","2.jpg","8.jpg","6.jpg","1.jpg","4.jpg","7.jpg","5.jpg"];
    var first=document.querySelector (".first");
    var image=document.querySelector (".image");
    var num=0;
   setInterval (function(){
       if(num>=imglist.length){
           num=0;
       }
       image.src="./img/"+imglist [num];
       num++;
   },1000);


</script>
</body>
</html>

在这里插入图片描述

莓莓儿～

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
最简单的图片轮播

声明一个变量用来存放多张图片的名称， var imglist=["3.jpg","2.jpg","8.jpg","6.jpg","1.jpg","4.jpg","7.jpg","5.jpg"];主要就运用一个循环播放的函数setinterval(),让图片的地址一秒一秒的变换，当变换到最后一张图片时，进行判断，让图片的索引为0，就完成了图片轮播。<!DOCTYPE html&g...
复制链接

扫一扫