轮播图【HTML+CSS+JavaScript】

给大家分享一个很好看的轮播图,这个也是之前看到别人写的效果感觉很好看,所以后面也自己实现了一下,在这里分享给大家,希望大家也可以有所收获

轮播图效果:

视频效果有点浑浊,大家凑合着看,大家有什么好的截视频方法推荐我一下吧,非常感谢,孩子太难了

轮播图功能:

  • 轮播图会有一个向左移动的视野效果
  • 点击右边图片会向左更新
  • 点击左边图片会向右更新
  • 点击右边箭头会向左更新
  • 点击左边箭头会向右更新
  • 使用鼠标在图片上进行悬停,图片不会自动更新 
  • 使用鼠标在小点上进行滑动,图片更新到对应的图片上

js实现思路:

获得我们的dom类:

下面有注释解释,大家结合上面轮播图的图片进行理解

        // 小圆点的父类let dotul = document.querySelector('.dot ul')// 图片let one = document.querySelector('.one')let three = document.querySelector('.three')// 我们图片的大框架let carousel_map = document.querySelector('.carousel-map')// 左边箭头let lefticon = document.querySelector('.lefticon')// 右边箭头let righticon = document.querySelector('.righticon')// 图片的父ullet ul = document.querySelector('.ul-img')// 左边图片的位置let leftbox = document.querySelector('.leftbox')// 右边图片的位置let rightbox = document.querySelector('.rightbox')
小圆点:

动态添加图片下的小圆点,使用for循环使用createElement()创建li元素,然后将创建的li添加到ul当中,但是因为我们显示的有图片和圆点进行绑定,所以我们要给一个小圆点添加上一个不一样的样式,添加了一个自定义样式,突出该圆点和图片的关联性,最开始我们要初始化一个小圆点,保证它可以和我们的第一个显示的图片相照应,这里我们首先显示的是第二个图片,所以在这里我们定义一个变量j为1,就是让我们的第二个小圆点进行显示,color()方法是给我们的小圆点上色的方法

//添加小点点for (let i = 0; i < parts.length; i++) {let li = document.createElement('li')// 添加自定义属性li.setAttribute('index', i)dotul.appendChild(li)}let j = 1dotul.children[j].className = 'change'function color() {for (let i = 0; i < parts.length; i++) {dotul.children[i].className = ''}dotul.children[j].className = 'change'}

大家可以注意到我们的j变量是有范围的,也就是0-5,我们应该对 j 进行一些处理,所以我们需要写一个函数进行管理,也就是我们的inspect()方法

function inspect() {if (j < 0) {j = 5} else if (j > 5) {j = 0}}
轮播图移动方法 left() 和 right () :

首先我们先定义一个parts数组,为的是让我们的图片类名进行更换

let parts = ['one', 'two', 'three', 'four', 'five', 'six']

大家看到这里可能不太了解,大家可以看以下的这些css代码(就是对以上类名的一些css操作)

.one {transform: translateX(-100px) scale(0.9);/* 初始位置和大小 */transition: transform 0.6s ease-out;/* 设置平滑过渡 */z-index: 4;}.two {transform: scale(1);/* 初始位置和大小 */transition: transform 0.6s ease;/* 设置平滑过渡 */z-index: 6;}.three {transform: translateX(100px) scale(0.9);/* 初始位置和大小 */transition: transform 0.5s ease-out;/* 设置平滑过渡 */z-index: 3;}.four {opacity: 0;transform: scale(0.9);z-index: 1;}.five {opacity: 0;transform: scale(0.9);z-index: 1;}.six {opacity: 0;transform: scale(0.9);z-index: 1;}

我们为什么要这么写呢,因为我们的图片放在的 li 元素使用了绝对定位大家从我下面的总代码中可以看到)这样就可以让我们的图片叠加到一起(绝对定位加上相对定位的效果),这样就方便我们对图片的操作了,然后我们对第一张图片和第三张图片进行位置移动,产生偏差的视觉效果,并且进行缩小操作,突出显示我们的第二张中间图片

下面是 我们分装图片进行向左更新和向右更新的方法

right()方法

对我们的parts数组进行后删前增这样我们的第三个图片的类变成了two,为什么呢,大家可以看看我的css代码,two类就是我们的中间图片,这样在通过css的transform和transition就实现了我们视频中的那种偏移效果,图片就进行更新了,我们的图片下的小圆点高光也进行更换(因为向左和向右的逻辑是一样的,这里我就不重复赘述了)

         function right() {// 将最后一个元素推到数组的前面parts.unshift(parts[5]) // 移动最后一个到最前面parts.pop()for (let i = 0; i < parts.length; i++) {if (ul.children[i]) {// 确保子元素存在ul.children[i].setAttribute('class', parts[i])}}j++inspect()color()}function left() {// 将最后一个元素推到数组的前面parts.push(parts[0]) // 移动最后一个到最前面parts.shift()for (let i = 0; i < parts.length; i++) {if (ul.children[i]) {// 确保子元素存在ul.children[i].setAttribute('class', parts[i])}}j--inspect()color()}
鼠标悬停小圆点:

关于悬停小圆点进行图片更新操作大概是这部分轮播图当中难的了,大家可能不太好理解,其实还是通过two的位置和小圆点的差距,然后通过这个差距的进行循环实现图片的移动从而实现小圆点和图片的对应

         dotul.addEventListener('mouseover', function (e) {if (e.target.tagName === 'LI') {let index = parseInt(e.target.getAttribute('index'))let now = parts.indexOf('two') // 获取当前显示的元素索引let dif = Math.abs(index - now) // 计算经过点与当前点的距离clearInterval(timer) // 清除定时器// 使用一个新的定时器来逐步移动if (index < now) {while (dif--) {left()}} else {while (dif--) {right()}}timer = setInterval(right, 1500) // 重新设置自动播放定时器}})
图片停止自动播放:

carousel_map是我们总体元素的父类,当鼠标悬停到上面时,就停止播放,当离开时,重启定时器,图片的自动更新

        carousel_map.addEventListener('mouseover', function () {lefticon.style.display = 'block'righticon.style.display = 'block'clearInterval(timer)})carousel_map.addEventListener('mouseout', function () {lefticon.style.display = 'none'righticon.style.display = 'none'clearInterval(timer)timer = setInterval(right, 1500)})
图片图标的点击事件:
        lefticon.addEventListener('click', function () {clearInterval(timer)left()timer = setInterval(right, 1500)})righticon.addEventListener('click', function () {clearInterval(timer)right()timer = setInterval(right, 1500)})leftbox.addEventListener('click', function () {clearInterval(timer)left()timer = setInterval(right, 1500)})rightbox.addEventListener('click', function () {clearInterval(timer)right()timer = setInterval(right, 1500)})

总代码:

大家可以自己找图片和iconfont小图标

<!DOCTYPE html>
<html lang="chn"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>/* 一些简单的初始化文件 */* {margin: 0;padding: 0;}a {text-decoration: none;}li {list-style-type: none;}/* 更改图片的大小 */img {width: 100%;border-radius: 20px;box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);}/* 确定盒子的大小 */.box {position: relative;width: 958px;height: 284px;/* 居中 */top: 0;left: 50%;transform: translate(-50%, 50%);}.imgs {position: absolute;width: 730px;height: 284px;top: 0;left: 50%;transform: translate(-50%, 0%);}/* 让图片都叠在一起 */.imgs li {position: absolute;width: 730px;transition: 0.5s;}/* 给左右按钮设计样式,和定位 */.box .left {position: absolute;font-size: 24px;color: white;width: 36px;height: 36px;line-height: 36px;text-align: center;background-color: black;border-radius: 18px;/* 添加半透明 */opacity: 0.3;top: 50%;left: 0;z-index: 999;}.box .right {position: absolute;font-size: 24px;color: white;width: 36px;height: 36px;line-height: 36px;text-align: center;background-color: black;border-radius: 18px;/* 添加半透明 */opacity: 0.3;top: 50%;right: 0;z-index: 999;}/* 给左右按钮添加鼠标移入样式 */.left:hover {/* 把透明度挑高一点,让按钮看起来更亮一些 */opacity: 0.7;}.right:hover {opacity: 0.7;}img {width: 600px;height: 240px;background-repeat: no-repeat;background-size: contain;}/* 把图片错开 */.imgs .one {transform: translateX(-150px) scale(0.9);z-index: 1;}/* 第二张图片在中间,层级最高 */.imgs .two {z-index: 2;}.imgs .three {transform: translateX(150px) scale(0.9);z-index: 1;}/* 刚开始不显示的图片就放在中间图片的下面 */.imgs .four {transform: scale(0.9);}.imgs .five {transform: scale(0.9);}.imgs .six {transform: scale(0.9);}/* 设计小圆圈 *//* 定位 */.list {position: absolute;bottom: -25px;left: 50%;margin-left: -81px;z-index: 777;}/* 设计样式 */.list li {float: left;width: 15px;height: 15px;background-color: rgb(230, 230, 230);border-radius: 50%;margin: 0 6px;cursor: pointer;}/* 小圆圈改变后的样式 */.list .change {background-color: rgb(236, 65, 65);}/* 左右两边各一个盒子 */.rights {position: absolute;right: 0;bottom: 30px;height: 255.5px;width: 100px;}.lefts {position: absolute;left: 0;bottom: 14px;height: 255.5px;width: 100px;}</style></head><body><!-- 大盒子 --><div class="box"><!-- 左侧按钮 --><a href="javascript:;" class="left">&lt</a><!-- 右侧按钮 --><a href="javascript:;" class="right">&gt</a><!-- 轮播图片 --><ul class="imgs"><li class="one"><a href="#"><img src="../image/carousel/carousel1.png" alt="1" /></a></li><li class="two"><a href="#"><img src="../image/carousel/carousel2.png" alt="2" /></a></li><li class="three"><a href="#"><img src="../image/carousel/carousel3.png" alt="3" /></a></li><li class="four"><a href="#"><img src="../image/carousel/carousel4.png" alt="4" /></a></li><li class="five"><a href="#"><img src="../image/carousel/carousel5.png" alt="5" /></a></li><li class="six"><a href="#"><img src="../image/carousel/carousel6.png" alt="6" /></a></li></ul><!-- 小圆圈 --><ul class="list"></ul><!-- 两个空盒子,实现左右两侧图片点击效果 --><div class="rights"></div><div class="lefts"></div></div><script>window.addEventListener('load', function () {//获取元素var leftb = document.querySelector('.left')var rightb = document.querySelector('.right')var box = document.querySelector('.box')var imgs = box.querySelector('.imgs')var imgt = imgs.querySelectorAll('li')//自动翻页函数var timeone = setInterval(function () {rightf()}, 1000)//左右按钮的出现box.addEventListener('mouseover', function () {leftb.style.display = 'block'rightb.style.display = 'block'//移入时清除定时器clearInterval(timeone)timeone = null})//左右按钮的消失box.addEventListener('mouseout', function () {leftb.style.display = 'none'rightb.style.display = 'none'//恢复定时器clearInterval(timeone)timeone = setInterval(function () {rightf()}, 1500)})//动态生成小圆圈,小圈圈模块var list = box.querySelector('.list')for (var i = 0; i < imgs.children.length; i++) {//创建li,加入ul中var li = document.createElement('li')list.appendChild(li)//给小圈圈添加类名li.setAttribute('index', i)//排他思想,实现点击小圆圈,变色// li.addEventListener('click', colors);//经过小圆圈,切换图片li.addEventListener('mouseenter', jump)}//一开始第二个亮list.children[1].className = 'change'//变色函数function colors() {//把所有的小圆圈变白for (var i = 0; i < list.children.length; i++) {list.children[i].className = ''}//给图片对应的小圆圈上色var index = this.getAttribute('index')list.children[index].className = 'change'}//跳转函数function jump() {var index = this.getAttribute('index')var now = num.indexOf('two')//计算经过点与当前点的距离var dif = Math.max(index, now) - Math.min(index, now)// console.log(dis);if (index > now) {while (dif--) {rightf()}} else {while (dif--) {leftf()}}}//小圆圈跟随着图片移动var j = 1function colort() {for (var i = 0; i < list.children.length; i++) {list.children[i].className = ''}if (j >= 6) {j = 0} else if (j < 0) {j = 5}list.children[j].className = 'change'}//翻页模块var num = ['one', 'two', 'three', 'four', 'five', 'six']//右翻页rightb.addEventListener('click', rightf)function rightf() {//把数组的最后一个添加到第一个num.unshift(num[5])//删除最后一个num.pop()//重新给li添加类名for (var i = 0; i < num.length; i++) {imgt[i].setAttribute('class', num[i])}//通过这个全局变量来让小圆圈的颜色一起变化j++colort()}//左翻页leftb.addEventListener('click', leftf)function leftf() {num.push(num[0])num.shift()for (var i = 0; i < num.length; i++) {imgt[i].setAttribute('class', num[i])}j--colort()}//点击图片实现翻页,这里我是通过在左右两边添加一个盒子来实现的var rights = document.querySelector('.rights')rights.addEventListener('click', function () {rightf()})var lefts = document.querySelector('.lefts')lefts.addEventListener('click', function () {leftf()})})</script></body>
</html>

到这里就讲解完了,感谢观看!!

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

OneRestore: A Universal Restoration Framework for Composite Degradation 论文阅读笔记

这是武汉大学一作单位的一篇发表在ECCV2024上的论文&#xff0c;文章代码开源&#xff0c;文章首页图如下所示&#xff0c;做混合图像干扰去除&#xff0c;还能分别去除&#xff0c;看起来很牛逼。文章是少见的做混合图像干扰去除的&#xff0c;不过可惜只包含了3种degradation…

基于Springboot的任务发布平台设计与实现(源码齐全+调试)

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。你想解决的问题&#xff0c;今天给大家介绍…

centos7 kafka高可用集群安装及测试

前言 用三台虚拟机centos7 搭建高可用集群&#xff0c;及测试方法 高可用搭建的方法&#xff0c;参考&#xff1a;https://blog.csdn.net/u011197085/article/details/134070318 高可用搭建 1、安装配置zookeeper集群 下载zookeeper 注&#xff1a;zookeeper链接如果失效&a…

30条勒索病毒处置原则

当前&#xff0c;勒索病毒在全球范围内肆虐&#xff0c;成为企业数据资产安全的头号威胁。这些狡猾的恶意软件&#xff0c;如同网络空间中的幽灵&#xff0c;不断寻找并利用系统的漏洞&#xff0c;通过加密数据或窃取敏感信息&#xff0c;向企业索取高额赎金。一旦感染&#xf…

推荐一款业内领先的建模工具:SAP PowerDesigner

SAP PowerDesigner是一款业内领先的建模工具&#xff0c;帮助您改进商务智能&#xff0c;打造更卓越的信息架构。通过该软件的元数据管理功能&#xff0c;可以构建关键信息资产的 360 度全方位视图&#xff0c;从而使数据管理、BI、数据集成和数据整合工作大获裨益。其分析功能…

6本SCI/SSCI被解除「On Hold」, 重新回归, 单位如何认定?还能投吗?

【SciencePub学术】截止至2024年10月&#xff0c;被WOS数据标记的on hold 期刊&#xff0c;共计25本&#xff0c;其中已有6本解除on hold, 重回SCI,SSCI。今天小编就带大家盘点这些“出狱”期刊情况&#xff0c;分析一下这些期刊是否还能投&#xff0c;值得投&#xff1f; 01In…

Linux下GCC编译器的安装

Linux下GCC编译器的安装 以下所有的版本都可以在https://gcc.gnu.org/pub/gcc/infrastructure/这里找最新的 通过apt-get方式下载的Qt5.9的gcc编译器版本只是4.8.3&#xff0c;无法打开一些Qt5的库头文件&#xff0c;所以准备在Llinux下再安装一个gcc5.3.0。 查看gcc版本 ubu…

【Linux】

软件包管理器 yum yum类似应用商店客户端&#xff0c;有人已经把软件写好放在服务器上了&#xff0c;通过yum找到服务器上的软件下载 软件操作 yum list 可以显示所有可下载软件&#xff0c;我们要找lrzsz软件 yum install 下载 yum remove 卸载 yum源 yum下载软件是通过…

【论文复现】基于图卷积网络的轻量化推荐模型

本文所涉及所有资源均在这里可获取。 &#x1f4d5;作者简介&#xff1a;热爱跑步的恒川&#xff0c;致力于C/C、Java、Python等多编程语言&#xff0c;热爱跑步&#xff0c;喜爱音乐、摄影的一位博主。 &#x1f4d7;本文收录于论文复现系列&#xff0c;大家有兴趣的可以看一看…

天命人开店日记之门店经营调研(下)

在调研前拟定了一些想要去了解的信息&#xff0c;包括&#xff1a;月销量、净利润、用户购买的主要担忧、与电商平台的竞争差异等关键内容&#xff0c;然而当自己去实地考察线下门店时&#xff0c;确发现实际情况与自己的预期相差非常大。大大出乎预料的包括三方面&#xff1a;…

桑基图在医学数据分析中的更复杂应用示例

桑基图&#xff08;Sankey Diagram&#xff09;能够有效地展示复杂的流动关系&#xff0c;特别适合用于医学数据分析中的多种转归和治疗路径的可视化。接下来&#xff0c;我们将构建一个稍微复杂的示例&#xff0c;展示不同疾病患者在治疗过程中的流动&#xff0c;以及他们的治…

【linux】再谈网络基础(一)

1. 再谈 "协议" 协议是一种 "约定"&#xff0c;在读写数据时, 都是按 "字符串" 的方式来发送接收的. 但是这里我们会遇到一些问题&#xff1a; 如何确保从网上读取的数据是否是完整的&#xff0c;区分缓冲区中的由不同客户端发来的数据 2. 网…

基于CNN-RNN的影像报告生成

项目源码获取方式见文章末尾&#xff01; 600多个深度学习项目资料&#xff0c;快来加入社群一起学习吧。 《------往期经典推荐------》 项目名称 1.【PaddleNLP的FAQ问答机器人】 2.【卫星图像道路检测DeepLabV3Plus模型】 3.【GAN模型实现二次元头像生成】 4.【CNN模型实现…

【AI落地应用实战】构建基于知识图谱的知识问答系统

一、知识图谱概述 知识图谱&#xff08;Knowledge Graph&#xff09;是一种结构化的语义知识库&#xff0c;它以图形的方式组织和整合信息&#xff0c;使得数据之间的关系变得直观和易于理解。知识图谱的概念融合了计算机科学、数据科学、人工智能等多个领域的技术&#xff0c…

微积分复习笔记 Calculus Volume 1 - 4.8 L’Hôpital’s Rule

4.8 L’Hpital’s Rule - Calculus Volume 1 | OpenStax

AI辅助论文写作的利弊

人工智能的时代&#xff0c;AI从自动驾驶到智能家居&#xff0c;慢慢的都成为了我们生活中的一部分。可当AI被放到学术研究领域&#xff0c;特别是撰写论文这一问题上时&#xff0c;却出现了大量的争议&#xff0c;认为AI撰写论文会削弱该有的批判性思维能力。那不用AI撰写论文…

AOP详解

一.什么是 AOP&#xff1f; AOP 的目的是将横切关注点&#xff08;如日志记录、事务管理、权限控制、接口限流、接口幂等等&#xff09;从核心业务逻辑中分离出来&#xff0c;通过动态代理、字节码操作等技术&#xff0c;实现代码的复用和解耦&#xff0c;提高代码的可维护性和…

红队知识学习入门(4)Windows病毒编写

声明 学习视频来自B站UP主 泷羽sec,如涉及侵泷羽sec权马上删除文章笔记的只是方便各位师傅学习知识,以下网站涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 1、端口号及对应漏洞 ftp:21 tenlnet:23 web:80 80-89:可能是web 443&#xff1a;ssl心脏滴血…

知识竞赛答题系统,线上答题小程序链接怎么做?

随着智能手机的普及&#xff0c;越来越多的单位开始在线上开展知识竞赛。这种形式的知识竞赛不仅易于操作&#xff0c;而且参与度更高。那么线上知识竞赛答题系统怎么做呢&#xff1f;自己可以做吗&#xff1f;答案是可以的&#xff01;借助微信答题系统制作平台风传吧&#xf…

AndroidStudio通过Bundle进行数据传递

作者&#xff1a;CSDN-PleaSure乐事 欢迎大家阅读我的博客 希望大家喜欢 使用环境&#xff1a;AndroidStudio 目录 1.新建活动 2.修改页面布局 代码&#xff1a; 效果&#xff1a; 3.新建类ResultActivity并继承AppCompatActivity 4.新建布局文件activity_result.xml 代…