轮播图代码

最新推荐文章于 2024-07-29 14:22:26 发布

小布丁*

最新推荐文章于 2024-07-29 14:22:26 发布

阅读量689

点赞数 2

文章标签： java js javascript

本文链接：https://blog.csdn.net/weixin_45757641/article/details/113388442

版权

javaweb 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

轮播图代码，复制粘贴可用

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>

</head>
<body>
<img src="image/zly1.jpg" width="100%" id="img"/>
<script>
    var num=1;
    function fun(){
        num++;
        if(num>4){
            num=1;
        }

        var img = document.getElementById("img");
        img.src="image/zly"+num+".jpg";
    }
    setInterval(fun,1000);
</script>
</body>
</html>

代码解释：

<img src="image/zly1.jpg" width="100%" id="img"/>

定义刚开始的那种图片,让他宽度是100%可以沾满屏幕，也可以自己设置宽高。

 if(num>4){
            num=1;
        }

这个num>4，是指由四张图片轮播，可以更改数字来改变轮播的图片数量。

img.src="image/zly"+num+".jpg";

注意，轮播的图片的命名应该有一定的规律，就是相同的名字，然后12345.
例如：zly1,zly2,zly3; 这行代码来张图片地址的。

如有问题，可以联系我。。。

小布丁*

关注

2
点赞
踩
0

收藏

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

轮播图代码，复制粘贴可用<!DOCTYPE html><html lang="ch"><head> <meta charset="UTF-8"> <title>轮播图</title></head><body><img src="image/zly1.jpg" width="100%" id="img"/><script> var num=1;
复制链接

扫一扫

专栏目录