轮播图代码

最新推荐文章于 2024-09-03 15:05:46 发布

小布丁*

最新推荐文章于 2024-09-03 15:05:46 发布

阅读量731

点赞数 2

文章标签： java js javascript

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

版权

javaweb 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

本文介绍了如何使用HTML和JavaScript创建一个简单的轮播图，通过设置图片源和计数器实现图片的自动切换。通过`<img>`标签定义初始图片，并利用`setInterval`定时器和条件判断控制图片的数量和切换顺序。

摘要由CSDN通过智能技术生成

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

<!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
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录