简单轮播图

最新推荐文章于 2021-06-03 05:22:33 发布

wuling129

最新推荐文章于 2021-06-03 05:22:33 发布

阅读量258

点赞数

分类专栏：网页设计文章标签： html

本文链接：https://blog.csdn.net/wuling129/article/details/105835971

版权

网页设计专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这两天布置作业，写到轮播图，有个较简单的处理方式。

利用定时器每过一秒切换一下图片。
创建image文件夹存放图片，1.jpg 2.jpg 3.jpg 4.jpg

<html>
  <head>
     <title>简单轮播图</title>
     <style>
      div {
            border: 1px solid red;
            width: 400px;
            height: 300px;
            margin: auto;
            text-align: center;
            }
    </style>
  </head>
<body onLoad="init()">
  <div>
    <img id="lunbotu" src="1.jpg" width="100%" height="100%" />
  </div>
  <script>
    function init(){
        setInterval("changeImg()", 1000);
        // 调用changeImg方法,1000毫秒,1000毫秒就是1秒钟调用一次
    }
    var i = 1;
    function changeImg(){
        i++;
        document.getElementById("lunbotu").src ="image/" +  i + ".jpg";
        // 需要注意的地方是 "image/" + i + ".jpg"; 
        if (i == 4) { // 重置i
            i = 0;
        }
    }
  </script>
  </body>
</html>

wuling129

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
简单轮播图

这两天布置作业，写到轮播图，有个较简单的处理方式。利用定时器每过一秒切换一下图片。创建image文件夹存放图片，1.jpg 2.jpg 3.jpg 4.jpg<html> <head> <title>简单轮播图</title> <style> div { border...
复制链接

扫一扫