网站上的轮播图都是怎么实现的？_网站首页轮播图怎么实现-CSDN博客

本文链接：https://blog.csdn.net/iMotherBoard/article/details/103826462

什么是轮播图

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

技术栈

要实现轮播图功能，主要是要用到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>