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

什么是轮播图

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

技术栈

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

什么是BOM

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

BOM的主要功能

  1. 弹出新浏览器窗口的能力;
  2. 移动、关闭和更改浏览器窗口大小的能力;
  3. 可提供WEB浏览器详细信息的导航对象;
  4. 可提供浏览器载入页面详细信息的本地对象;
  5. 可提供用户屏幕分辨率详细信息的屏幕对象;
  6. 支持Cookies;
  7. 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 元素。

实现思路

  1. 在HTML代码中添加图片标签
  2. 通过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基础学习笔记。


日积跬步,终至千里
在这里插入图片描述

在网页上实现基本的3D轮播图主要利用CSS3的3D转换(3D Transform)功能以及JavaScript来控制动画和交互。以下是实现基本3D轮播图的步骤: 1. HTML结构:首先创建一个包含轮播项的`div`容器,并为每个轮播项创建`div`元素。 ```html <div id="carousel" class="carousel-3d"> <div class="carousel-item">内容1</div> <div class="carousel-item">内容2</div> <div class="carousel-item">内容3</div> <!-- 添加更多轮播项 --> </div> ``` 2. CSS样式:使用CSS为轮播图设置样式,包括轮播容器的定位、大小、以及3D效果。同时,对每个轮播项设置样式,并使用`perspective`和`transform`属性来创建3D效果。 ```css .carousel-3d { perspective: 1200px; position: relative; width: 100%; transform-style: preserve-3d; } .carousel-item { position: absolute; width: 100%; left: 0; top: 0; backface-visibility: hidden; transform: rotateY(180deg); transition: transform 1s; } ``` 3. JavaScript控制:编写JavaScript代码来控制轮播项的切换和动画。可以使用`requestAnimationFrame`或者`setTimeout`来定时切换轮播项的`transform`属性,从而实现旋转动画效果。 ```javascript const carousel = document.querySelector('.carousel-3d'); const items = document.querySelectorAll('.carousel-item'); let currentIndex = 0; function nextItem() { items[currentIndex].style.transform = 'rotateY(-180deg)'; currentIndex = (currentIndex + 1) % items.length; items[currentIndex].style.transform = 'rotateY(0deg)'; } // 轮播动画 function rotateCarousel() { carousel.style.transform = 'rotateY(360deg)'; carousel.addEventListener('transitionend', function() { carousel.style.transition = 'none'; nextItem(); carousel.style.transition = 'all 1s'; }, { once: true }); } // 启动轮播 setInterval(rotateCarousel, 3000); // 每3秒轮播一次 ``` 以上代码提供了一个简单的3D轮播图实现框架,你可以在此基础上进行扩展,比如添加前后切换按钮、指示器、响应式布局等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值