Javascript实现图片轮播

最新推荐文章于 2024-03-29 08:09:33 发布

lihuiGG520

最新推荐文章于 2024-03-29 08:09:33 发布

阅读量432

点赞数

分类专栏： Javascript 文章标签： Javascript html 图片轮播

本文链接：https://blog.csdn.net/lihuiGG520/article/details/81541733

版权

Javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

用Javascript在HTML中实现图片轮播、循环播放：

图片命名控制法：

1.首先在web项目中的img添加你要循环播放的图片，并将这些图片的名字命名为xxx1.jpg ; xxx2.jpg等等；
2.创建新的HTML文件并在body中使用标签打开第一张图片并设置id，可以自己设置style样式要求；
3.在script中设置变量i并赋值为1，创建函数方法setimages(),创建对象element并指向图片标签，用.src功能打开图片；
4.设置i++和if语句，在到达最后一张图片后，将i的值置为1，实现循环播放；
5.使用setInterval()功能实现每隔多少毫秒自动使用一次function功能，实现自动播放；

参考代码见下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>图片轮播</title>
    </head>
    <body>
        <img src="img/kun1.jpg"  id="images" style="width: 400px;"/>
        <script>
            var i=1;
            function setimages(){
                    var element = document.getElementById("images");
                    element.src="img/kun"+i+".jpg";
                    i++;
                    if(i==7) i=1;
            }
            var id=setInterval("setimages()",1000);
        </script>
    </body>
</html>