什么是轮播图

在许多网站首页都有一个自动切换的图片栏，比如下面这个从淘宝上截取的轮播图。

技术栈

要实现轮播图功能，主要是要用到JavaScript中BOM对象模型。

什么是BOM

BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

BOM的主要功能

弹出新浏览器窗口的能力；
移动、关闭和更改浏览器窗口大小的能力；
可提供WEB浏览器详细信息的导航对象；
可提供浏览器载入页面详细信息的本地对象；
可提供用户屏幕分辨率详细信息的屏幕对象；
支持Cookies；
Internet Explorer对BOM进行扩展以包括ActiveX对象类，可以通过JavaScript来实现ActiveX对象。

BOM的组成

Window：窗口对象
Navigator：浏览器对象
Screen：显示器屏幕对象
History：历史记录对象
Location：地址栏对象

简而言之，BOM是将浏览器的各个组成部分封装成对象来使用。
轮播图要用到其中的Window：窗口对象

Window：窗口对象

所有浏览器都支持 window 对象。它代表浏览器的窗口。Window对象不需要创建可以直接使用。

在轮播图中要用到Window窗口对象的 setInterval()方法以及 document 对象的getElementById 方法

setInterval()方法
按照指定的周期（以毫秒计）来调用函数或计算表达式。
document 对象的getElementById 方法
使用元素的 id访问 HTML 元素。

实现思路

在HTML代码中添加图片标签
通过setInterval()方法定时循环切换图片

代码实现

现在直接上代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>轮播图</title></head>
<body><img id="img" src="img/1.jpg" width="50%"> <!--定义图片标签--><script>//修改图片src属性var number = 1; /*用于控制循环次数*/function fun(){if(++number > 4){ /*总共四张图片需要切换*/number = 1;}//获取img对象var img = document.getElementById("img");img.src = "img/"+number+".jpg";  /*修改图片标签的src属性达到切换图片的目的*/}setInterval(fun,1000);/*每一秒切换一张图片*/</script>
</body>
</html>

运行结果

在IDEA中运行，浏览器显示结果如下：

资源

关注下面回复“JS”，获取JavaScript基础学习笔记。

日积跬步，终至千里

网站上的轮播图都是怎么实现的？相关推荐

javascript--爱奇艺网站首页（轮播图）
实现一个爱奇艺网站首页的轮播图: <!DOCTYPE html> <html lang="en"> <head><meta charset ...
实现网站常见的轮播图
一.大致思路: 先创建一个div,限定其宽度和高度,overflow:hidden,且设置其position为relative(相对位置). 然后创建一个装图片的div,宽度为所有图片的总宽度,且设置 ...
css轮播箭头怎么隐藏,CSS——轮播图中的箭头
注意事项: 1.定位中left权重比right高,top权重比bottom高 2.两个span标签嵌套在一个盒子中,将来显示隐藏只需要控制父盒子就行了 .box { width: 400px; hei ...
html轮播台袋效果,css3百叶窗轮播图效果
标题 #Con{width:900px; /*宽度*/ height:500px;/*高度*/ background:#9933FF;/*背景颜色*/ position:relative;} #con ...
html怎么做产品轮播图,商品轮播图是什么意思（html轮播图怎么制作）
但轮播图对用户真的有意义吗?或者它只是设计者用来偷懒,将内容一股脑塞进去的工具呢? 不论将这个问题抛向谁,他们都会告诉你,"轮播图就是个反面模式(anti-pattern)."轮播 ...
【云开发】10分钟零基础学会做一个快递查询微信小程序，快速掌握微信小程序开发技能（轮播图、API请求）
大家好,我叫小秃僧这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...
原生js实现轮播图实例教程
原生js实现轮播图实例教程本实例效果如下图所示: 根据实例效果,需要的元素有图片.中间圆点按钮.左右箭头按钮等.实际html代码如下所示: <div class="banner_co ...
用RecyclerView打造一个轮播图
通常Android的轮播图(俗名:Banner)都是用ViewPager实现的,但是我在实际项目运用中碰到了一些小问题,于是决定另寻思路,采用RecyclerView这个更优雅更强大的控件来实现轮播的 ...
vue开发一个实用美观的轮播图组件
网上有不少vue开发的轮播图资源,相信读者也看过不少,这里笔者开发了一个轮播图组件,简单美观实用. 先上示例图: 常见的轮播图都是占满屏幕的形式,像上图所示的轮播图虽然经常见到,但是在一些常见的轮播组 ...

网站上的轮播图都是怎么实现的？