HTML + JavaScript 实现简单的轮播图

步骤分析

复制 分析：
    1.在页面上使用img标签展示图片
    2.定义一个方法，修改图片对象的src属性
    3.定义一个定时器，每隔3秒调用方法一次。

图片如下：

banner_1.jpg

banner_2.jpg

banner_3.jpg

步骤实现

第一步：在页面上使用img标签展示图片

复制 <img id="img" src="img/banner_1.jpg" width="100%">

第二步：定义一个方法，修改img的src属性

复制 // 修改图片src属性
var number = 1;
function fun(){
    number ++ ;
    // 判断number是否大于3
    if(number > 3){
        number = 1;
    }
    // 获取img对象
    var img = document.getElementById("img");
    img.src = "img/banner_"+number+".jpg";
}

第三步：定义一个定时器，每隔3秒钟调用这个方法一次

复制 // 定义定时器
setInterval(fun,3000);

所有步骤的代码如下

复制 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>
 
    <img id="img" src="img/banner_1.jpg" width="100%">
 
    <script>
        // 修改图片src属性
        var number = 1;
        function fun(){
            number ++ ;
            // 判断number是否大于3
            if(number > 3){
                number = 1;
            }
            // 获取img对象
            var img = document.getElementById("img");
            img.src = "img/banner_"+number+".jpg";
        }
 
        // 2.定义定时器
        setInterval(fun,3000);
    </script>
 
</body>
</html>

posted @ 2020-03-01 00:46 LeeHua 阅读(4402) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· winform 绘制太阳，地球，月球运作规律
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾（3.3-3.9）

Lee Hua's Blog

热爱编程 -- 写Bug

HTML + JavaScript 实现简单的轮播图

公告

我的标签

积分与排名

随笔分类 (240)

随笔档案 (226)

阅读排行榜

推荐排行榜

	分析：
	1.在页面上使用img标签展示图片
	2.定义一个方法，修改图片对象的src属性
	3.定义一个定时器，每隔3秒调用方法一次。

	// 修改图片src属性
	var number = 1;
	function fun(){
	number ++ ;
	// 判断number是否大于3
	if(number > 3){
	number = 1;
	}
	// 获取img对象
	var img = document.getElementById("img");
	img.src = "img/banner_"+number+".jpg";
	}

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

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

	<script>
	// 修改图片src属性
	var number = 1;
	function fun(){
	number ++ ;
	// 判断number是否大于3
	if(number > 3){
	number = 1;
	}
	// 获取img对象
	var img = document.getElementById("img");
	img.src = "img/banner_"+number+".jpg";
	}

	// 2.定义定时器
	setInterval(fun,3000);
	</script>

	</body>
	</html>