HTML + JavaScript 实现简单的轮播图 |
您所在的位置：网站首页 › 简单banner怎么设计 › HTML + JavaScript 实现简单的轮播图 |
HTML + JavaScript 实现简单的轮播图
|
步骤分析
分析：
1.在页面上使用img标签展示图片
2.定义一个方法，修改图片对象的src属性
3.定义一个定时器，每隔3秒调用方法一次。
图片如下：
banner_1.jpg
banner_2.jpg
banner_3.jpg 步骤实现第一步：在页面上使用img标签展示图片 
第二步：定义一个方法，修改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);所有步骤的代码如下 轮播图
// 修改图片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);
本文来自博客园，作者：LeeHua，转载请注明原文链接：https://www.cnblogs.com/liyihua/p/12387573.html |
【本文地址】
今日新闻 |
推荐新闻 |