js实现轮播图

简介: js实现轮播图

轮播图的实现主要是BOM中window窗口对象里面的与定时器有关的方式

setTimeout() 在指定的毫秒数后调用函数或计算表达式

* 参数:

1. js代码或者方法对象

2. 毫秒值

* 返回值:唯一标识,用于取消定时器

clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。

clearInterval() 取消由 setInterval() 设置的 timeout。


步骤


0.准备几张图片

1.在页面上使用img标签展示图片

2.定义一个方法.修改图片对象的src属性,来实现更改的图片的功能

3.定义一个定时器,每隔一段时间使用一次方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="img" src="img/banner_1.jpg" width="100%">
<script>
    var i=1;
    function fun() {
        i++;
        if(i>3){
            i=1;
        }
        var img = document.getElementById("img");
        img.src="img/banner_"+i+".jpg";
    }
    setInterval(fun,2000);
</script>
</body>
</html>
相关文章
|
5月前
|
前端开发 JavaScript 索引
|
7天前
|
JavaScript 前端开发
js轮播图练习
文章介绍了如何使用HTML、CSS和JavaScript创建一个简单的轮播图效果。通过`img`标签展示图片,并通过点击下方的点(`span`标签)切换图片。文章提供了完整的HTML结构、CSS样式和JavaScript代码,以及图片的展示和轮播图的效果图。
js轮播图练习
|
7天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
2月前
|
JavaScript
js轮播图制作
js轮播图制作
30 1
|
2月前
|
JavaScript
js轮播图功能
js轮播图功能
14 0
|
2月前
|
前端开发 JavaScript
如何使用JavaScript制作轮播图
如何使用JavaScript制作轮播图
10 0
|
2月前
|
JavaScript
js之简单轮播图
js之简单轮播图
32 0
|
4月前
|
安全 JavaScript
旋转木马轮播图 html+css+js
旋转木马轮播图 html+css+js
|
4月前
|
机器学习/深度学习 JavaScript 前端开发
一篇文章讲明白JS左右轮播图的制作思路
一篇文章讲明白JS左右轮播图的制作思路
30 0
|
4月前
|
机器学习/深度学习 JavaScript 前端开发
一篇文章讲明白JS左右轮播图的制作思路
一篇文章讲明白JS左右轮播图的制作思路
17 0
下一篇
无影云桌面