用四种方法实现轮播图

1、css3动画实现的轮播图

实现原理如下:

1、设置大的div a)设置绝对定位,定位位置; b)设置图片展示出来的高度和宽度(height和width); c)设置overflow:hidden;设置超出部分隐藏;使得图片只能在这个框中显示;
2、设置小的div,将所有图片都包起来;宽度是所有图片的宽度;设置position:relative // position:absolute 来让它可以实现轮播的功能;必不可少。(自己的理解,设置大div和小div 的position,来让div浮起来,脱离文档流,就像云一样,可以飘了~)
3、给里面的图片设置float:left;向左浮动,可以让所有图片都在同一行;如果没有float:left;会导致图片轮播的时候出现空白;
4、加入动画;每次都向左偏移一个图片的宽度,即可实现图片轮播;
5、将第一张图片与最后一张图片设置成一样的,是为了实现视觉上的无缝连接;

代码:
在这里插入图片描述
在这里插入图片描述

2、bootstrap框架

知识点:(这里只写了一点点,具体的知识点 在菜鸟教程里可以看的很清晰哒~ 链接地址:https://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html)

通过data属性:使用data属性可以很容易控制轮播(Carousel)的位置;

  • 属性data-slide 接受关键字prev或next,用来改变幻灯片相对于当前位置的位置。

  • 使用data-slide-to来向轮播传递一个原始滑动索引,data-slide-to="2"将把滑块移动到一个特定的索引,索引从0开始计数。

代码:(直接往里带即可)
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3、用js方法实现(重头戏!!!)

实现原理:

1、自动轮播:

用setInterval(调用的函数,时间); 注意"调用的函数"处要写成函数名,不能带括号,带括号表示立即调用这个函数,不带则表示指向函数的指针。
被调用的函数 ,我的代码中呢,是xunhuan() ;不断地自加,也就是不断地往后循环,if语句实现的是:当图片到最后一张时,让其跳转到第一张。
调用的change1()函数呢,实际上就是实现轮播的较为核心的部分;先将所有图片,点点的样式设置为一样的,再对当前索引对应的图片,点点设置特别的样式。

2、鼠标移入,移出事件;

接下来的pointlist,以及两个for循环 里的事件监听事件,都是为了实现鼠标的移入,移出。
pointlist 点点;imgs 图片; spans 左右按钮。
注意:1)如果你想要通过点击事件来改变图片的移动时,就必须让鼠标移动到上面时设置清除计时器;因为如果不设置的话,当你通过点击事件改变它时,它自身也会自己改变,会出现混乱。2)当清除完后,鼠标移出后需要重新启动计时器,这时候不能再给它设置var
jishi;因为如果再加上var 的话,相当于重新又定义了一个变量,会有好几个计时器同时进行,会越来越快。

3、手动轮播 底下小点点的按钮控制

判断点击的是哪个点点,然后将它的索引值赋值给index,再通过调用change1()函数,来实现它的改变。
这里我是通过将点击元素的父元素来和所有的li进行比较,如果一样,则将对应的索引值赋值给index.

4、左右按钮的控制

让它实现自增或自减,然后调用change1()函数来改变样式。 其实这里的知识点和自动轮播里的知识点差不多。(从最后一张图片跳转到第一张图片,从第一张跳转到最后一张。)
无论是自动轮播,还是点击控制,都要加入change1() 以及index 来实现对样式的控制,从而实现轮播的效果。

代码:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4、用jQuery实现

(与js用的方法一样,只是语法不同而已,与上面的js方法对比着看,很好理解哒~ 用完jQuery, 发现相比于js来说好方便呀~ ,记得用的时候要加上 引用jQuery,否则没有效果的~ )

代码如下:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/817652.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[学习笔记] 网络安全 bp爆破

我们用的靶场是用的一个皮卡丘的漏洞练习平台的一个靶场首先要开启浏览器代理,然后开启在bp上开启就是拦截代理模块里面的拦截它有4个攻击模式,分别是: Sniper(狙击手):这种攻击方式主要是将包内各个用$$符…

NL2SQL进阶系列(5):论文解读业界前沿方案(DIN-SQL、C3-SQL、DAIL-SQL)、新一代数据集BIRD-SQL解读

NL2SQL进阶系列(5):论文解读业界前沿方案(DIN-SQL、C3-SQL、DAIL-SQL)、新一代数据集BIRD-SQL解读 NL2SQL基础系列(1):业界顶尖排行榜、权威测评数据集及LLM大模型(Spider vs BIRD)全面对比优劣分析[Text2SQL、Text2DSL] NL2SQL基础系列(2):主流大模型与微调方法精选集…

代码对比同步辅助工具,提高开发效率

一开始只是开发抖音的程序,后面复制代码去改成快手、小红书、拼多多等平台的程序。 然后一有些修改调整,可能需要同步到其他平台的代码中; 每次需要打开一个或者多个开发工具IDE,每个IDE打开一个项目,再去对照路径翻…

淘宝天猫商品详情API接口(商品详情页面数据接口,商品销量接口)

淘宝天猫商品详情API接口主要包括商品详情页面数据接口和商品销量接口。这些接口为商家和开发者提供了获取淘宝天猫平台上商品详细信息和销量数据的途径。 商品详情页面数据接口: 通过商品详情页面数据接口,商家和开发者可以获取到商品的详细信息&…

【Java探索之旅】数组概念与初始化指南:动静结合

🎥 屿小夏 : 个人主页 🔥个人专栏 : Java编程秘籍 🌄 莫道桑榆晚,为霞尚满天! 文章目录 📑前言一、初识数组1.1 为什么要有数组?1.2 数组的的概念 二、数组的创建及初始化…

python学习之:数据类型

大纲: 一、列表list的定义语法 1、 """" 演示数据类型:list列表 语法:变量 [元素1,元素2,元素3,......] """ # 定义一个列表list name_list [itheima, itcast, pyt…

8款AI绘画工具推荐,让你绘画更加生动有趣

大家好,我是你们的AI绘画导购员小助手!今天我给大家带来了8款超级厉害的AI绘画工具推荐,它们不仅能让你的绘画更加生动有趣,还能让你的创作达到一个新的高度! "爱制作AI"---这是一款非常好用的 AI 写作工具&…

TypeScript-官方基础模板创建的小程序,如何创建js文件

如何创建JS文件,不需要寻找“js”文件类型,只需要创建一个新的“文件”即可。 第一步:先删除 ts文件;如 index.ts 第二步:右键点击项目,选择“新建”,然后选择“文件”。 第三步:在弹出的界面中,在“文件名”中输入“…

ssm051网上医院预约挂号系统+jsp

网上医院预约挂号系统设计与实现 摘 要 如今的信息时代,对信息的共享性,信息的流通性有着较高要求,因此传统管理方式就不适合。为了让医院预约挂号信息的管理模式进行升级,也为了更好的维护医院预约挂号信息,网上医院…

pycharm配置anaconda环境时找不到python.exe解决办法

在一台新电脑上配置anaconda环境时,发现pycharm在设置解释器时,在conda环境中找不到anaconda已经创建好的python解释器可执行文件python.exe,其显示如下: 上图只显示创建的虚拟环境中的那些文件夹,但是没有显示这个虚拟…

【Java】SpringBoot快速整合mongoDB

目录 1.什么是mongoDB? 2.Docker安装mongoDB 3.SpringBoot整合mongoDB步骤 4.验证 1.什么是mongoDB? MongoDB是一种非关系型数据库,被广泛用于大型数据存储和分布式系统的构建。MongoDB支持的数据模型比传统的关系型数据库更加灵活&#x…

【Node.js】Express学习笔记(黑马)

目录 初识 ExpressExpress 简介Express 的基本使用托管静态资源nodemon Express 路由路由的概念路由的使用 Express 中间件中间件的概念Express 中间件的初体验中间件的分类 初识 Express Express 简介 什么是 Express? 官方给出的概念:Express 是基于…

列举和介绍Mysql中各种日志

MySQL 使用多种类型的日志来管理数据、记录活动、追踪错误和帮助恢复数据。这些日志各具特点,针对不同的运维和开发需求提供支持。下面是 MySQL 中常见的日志类型及其用途的详细介绍: 1. 二进制日志(Binary Log) 实际运维应用 启…

P8742 [蓝桥杯 2021 省 AB] 砝码称重-Java版

[蓝桥杯 2021 省 AB] 砝码称重 题目描述 你有一架天平和 N N N 个砝码, 这 N N N 个砝码重量依次是 W 1 , W 2 , ⋯ , W N W_{1}, W_{2}, \cdots, W_{N} W1​,W2​,⋯,WN​ 。 请你计算一共可以称出多少种不同的重量? 注意砝码可以放在天平两边。 输入格式 输入的第一…

这个Python神器,能让你摸半天鱼!

今天给大家分享一个炒鸡炒鸡简单又好用的神器——pampy。 我敢以我的荣誉保证,用了它之后,你写代码的效率可以蹭蹭蹭地提升! Pampy 是哪路神仙 首先普及一下模式匹配。 模式匹配即给定某种模式,用这种模式去检查序列或字符串是…

numpy/arrayobject.h: No such file or directory

catkin编译时出现,numpy/arrayobject.h: No such file or directory 错误表明编译过程中找不到 NumPy 相关的头文件。这通常是因为环境中的 NumPy 没有被正确配置到包含路径中,或者 NumPy 没有被安装。以下是几个解决步骤来帮助你解决这个问题: 确认 NumPy 已安装 首先,确保…

AUTOSAR Interrupt

AUTOSAR中断 中断提供了应用程序与现实世界中发生的事情之间的接口。例如,我们可以使用中断来捕获正在按下的按钮,以标记时间的流逝或捕捉一些其他刺激。 当中断发生时,处理器通常先查询本地存储的预配置的中断向量。中断向量一般包含了对应中断句柄的地址。 单级中断和嵌…

前端页面显示时间与数据库时间差8小时

环境 jdk11mysql 8.0docker部署的 问题 突然发现页面上的数据比数据库的时间差了八个小时,然后我就开始排查问题。 首先看数据库的信息,发现时间都是没错的。 然后看一下ymal文件,是否是数据源链接写的有问题。 spring:datasource:url:…

NzN的数据结构--外排序

接上文,本篇向大家简单展示一下外排序的实现。先三连后看才是好习惯!!! 在我们刚接触数据结构的时间里,我们只需要对外排序简单了解一下即可,重点要掌握的还是前面我们介绍的比较排序和非比较排序里的计数排…

蓝色系UX/UI设计求职面试作品集模版figmasketchPPT可编辑源文件

页面数量: 20P 页面尺寸:1920*1080PX 交付格式:figma、sketch、PPT 赠送文件:24款高质量样机(PSD格式) 该作品集虽然只有20页,但可根据需求复制作品集里已有的页面作为模版来扩展您的设计项目 该作品集模版可编辑可修…