JS轮播图

最新推荐文章于 2024-07-06 16:47:02 发布
最新推荐文章于 2024-07-06 16:47:02 发布
阅读量275 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46463984/article/details/123719005
版权

轮播图基础

  • 巩固完JavaScriptDOM自己尝试写一下轮播图
小功能
  • 上一页、下一页
  • 自动轮播
  • 鼠标悬停止轮播
  • 点击小方框轮播
  • 无缝轮播
涉及知识点
  • JS面向对象Class
  • JSDOM操作
  • this指向
  • 事件委托
  • 事件监听
  • 动画封装
  • 定时器
  • 节流阀
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
	</head>
	<body>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
				box-sizing: border-box;
			}

			#slideshow {
				margin: 60px 60px 0 60px;
				width: 1000px;
				position: relative;
			}

			li {
				list-style: none;
			}

			.continer {
				width: 1000px;
				overflow: hidden;
			}

			.continer ul {
				width: 1000px;

				display: flex;
			}

			.continer ul li {
				width: 100%;
				height: 100%;
			}

			.continer ul li img {
				width: 1000px;
				height: 640px;
				cursor: pointer;
			}

			.labels {
				position: absolute;
				top: 90%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.labels ul {
				display: flex;
			}

			.labels ul li {
				width: 30px;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.labels ul li span {
				display: inline-block;
				width: 15px;
				height: 15px;

				background: #fff;
			}

			.active {
				background: red !important;
				width: 30px;
			}

			.arrows {
				width: 100%;
				height: 60px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.circl {
				width: 60px;
				height: 60px;
				border-radius: 50%;
				background: rgb(0, 0, 0, .2);
				position: relative;
				overflow: hidden;
				cursor: pointer;
				/* display: none; */
			}

			.circl .square {
				width: 60px;
				height: 60px;
				border-left: 3px solid #999999;
				border-bottom: 3px solid #999999;
				position: absolute;
				top: 50%;
				left: 100%;
				transform: translate(-50%, -50%) rotate(45deg);
			}

			.circl .square.right {
				top: 50%;
				left: 0%;
				border-top: 3px solid #999999;
				transform: translate(-50%, -50%) rotate(135deg);
			}
		</style>
		<div id="slideshow">
			<div class="continer">
				<ul>
				</ul>
			</div>
			<div class="labels">
				<ul>
				</ul>
			</div>
			<div class="arrows">
				<div class="circl left">
					<div class="square ">

					</div>
				</div>
				<div class="circl right">
					<div class="square right">

					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			let imgArr = ["./img/1.jpg", "./img/2.jpg", "./img/3.jpg", "./img/4.jpg"]
			let that;
			class Slideshow {
				constructor(name) {
					that = this
					this.continer = document.querySelector('.continer')
					this.labels = document.querySelector('.labels')
					this.arrowsLeft = document.querySelector('.left')
					this.arrowsRight = document.querySelector('.right')

					this.init()
					this.getAll()
					this.currentCarouselIndex = 0 // 当前循环被激活的下标
					this.carouselTimer = null //循环的定时器开关
					this.autoCarousel() // 开启循环
					// this.stopCarousel() // 关闭循环轮播
					this.flag = true // 节流阀 
				}
				getAll() {
					this.lis = this.labels.querySelectorAll('li')
					this.imgs = this.continer.querySelectorAll('ul li img')
					this.lis[0].children[0].className += ' active'
					this.labels.children[0].addEventListener('click', that.hadellabelClick)
				}
				init() {
					// 动态初始化轮播图 img 和 小圆点
					that = this
					let str = [];
					let labelStr = []
					imgArr.forEach((item, index) => {
						str.push(`<li><img data-index=${index} src="${item}" ></li>`)
						labelStr.push(`<li data-index=${index}><span></span></li>`)
					})
					that.continer.children[0].innerHTML = str.join('')
					that.labels.children[0].innerHTML = labelStr.join('')
					that.continer.children[0].appendChild(that.continer.children[0].children[0].cloneNode(true))
					// 绑定鼠标移入和移除事件
					this.continer.children[0].addEventListener('mouseover', this.handelMouseenter)
					this.continer.children[0].addEventListener('mouseout', this.handelMouseleave)
					// 箭头事件
					this.arrowsLeft.addEventListener('click', this.handelArrowsLef)
					this.arrowsRight.addEventListener('click', this.handelArrowsRight)
							this.arrowsLeft.parentNode.addEventListener('mouseover', this.handelMouseenter)
				}
				hadellabelClick(e) {
					that.flag = false
					clearInterval(that.carouselTimer)
					// 拿到当前点击事件的 index下标值 由于html层级结构设计的不是很好只能这样了（事件委托）
					const index = e.target.getAttribute('data-index') ? e.target.getAttribute('data-index') : e.target
						.parentNode.getAttribute('data-index')
					// 排他思想 先清除所有后添加
					that.cancelActiveClass()
					that.labels.children[0].children[index].children[0]?.classList.add('active')
					// 更新当前的坐标
					that.currentCarouselIndex = index
					//开启移处理动事件 
					that.hadelOffset(that.currentCarouselIndex)

				}
				// 清除所有的class
				cancelActiveClass() {
					Array.from(that.labels.children[0].children).forEach(item => {
						item.children[0].classList?.remove('active')
					})
				}
				// 得到当前点击事件的index 并计算移动距离
				hadelOffset(index) {
					// 如果当前开启了自动轮播 先暂停自动轮播
					clearInterval(that.carouselTimer)
					const ul = this.continer.children[0]
					if (index >= imgArr.length) {
						that.cancelActiveClass()
						that.labels.children[0].children[0].children[0]?.classList.add('active')
						animate(ul, -ul.offsetWidth * imgArr.length, 10, 30, function() {
							ul.style.marginLeft = 0
							that.currentCarouselIndex = 0
							that.flag = true
						})
					} else if (index <= 0) {
						that.cancelActiveClass()
						that.labels.children[0].children[0].children[0]?.classList.add('active')
						animate(ul, -ul.offsetWidth * index, 10, 30, function() {
							ul.style.marginLeft = -(ul.children.length - 1) * ul.offsetWidth + 'px'
							that.currentCarouselIndex = ul.children.length - 1
							that.flag = true
						})
					} else {
						animate(ul, -ul.offsetWidth * that.currentCarouselIndex, 10, 30, function() {
							that.autoCarousel(that.currentCarouselIndex)
							that.flag = true
						})
						that.cancelActiveClass()
						that.labels.children[0].children[that.currentCarouselIndex].children[0]?.classList.add('active')
					}
				}
				// 自动轮播
				autoCarousel(currentCarouselIndex) {
					const ul = this.continer.children[0]
					that.currentCarouselIndex = currentCarouselIndex ? currentCarouselIndex : 0
					if (that.carouselTimer) clearInterval(that.carouselTimer)
					that.carouselTimer = setInterval(() => {
						that.currentCarouselIndex > imgArr.length ? that.currentCarouselIndex = 0 : that
							.currentCarouselIndex++
						if (that.currentCarouselIndex >= imgArr.length) {
							that.cancelActiveClass()
							that.labels.children[0].children[0].children[0]?.classList.add('active')
							animate(ul, -ul.offsetWidth * imgArr.length, 10, 30, function() {
								ul.style.marginLeft = 0
								that.currentCarouselIndex = 0
							})
						} else {
							animate(ul, -ul.offsetWidth * that.currentCarouselIndex, 10, 30)
							that.cancelActiveClass()
							that.labels.children[0].children[that.currentCarouselIndex].children[0]?.classList.add(
								'active')
						}
					}, 2000)

				}
				// 停止轮播
				stopCarousel() {
					if (that.carouselTimer)
						clearInterval(that.carouselTimer)
				}
				// 鼠标移入停止轮播
				handelMouseenter() {
					that.stopCarousel()
					// 显示箭头
					that.arrowsLeft.style.display = 'block'
					that.arrowsRight.style.display = 'block'
				}
				// 鼠标移出继续轮播
				handelMouseleave() {
					that.autoCarousel(that.currentCarouselIndex)
					that.arrowsLeft.style.display = 'none'
				 that.arrowsRight.style.display = 'none'
				}
				// 左箭头减一
				handelArrowsLef() {
					if (that.flag) {
						that.flag = false
						that.currentCarouselIndex <= 0 ? that.currentCarouselIndex = 0 : that.currentCarouselIndex--
						that.hadelOffset(that.currentCarouselIndex)
					}
				}
				// 右箭头加1
				handelArrowsRight() {
					if (that.flag) {
						that.flag = false
						that.currentCarouselIndex > imgArr.length ? that.currentCarouselIndex = 0 : that
							.currentCarouselIndex++
						that.hadelOffset(that.currentCarouselIndex)
					}
				}
			}

			new Slideshow('#slideshow')
			// 封装轮播动画函数
			function animate(obj, target, spped = 10, time, callback) {
				clearInterval(obj.timer)
				obj.timer = setInterval(() => {
					let step = (target - obj.offsetLeft) / spped
					step = step > 0 ? Math.ceil(step) : Math.floor(step)
					if (obj.offsetLeft == target) {
						clearInterval(obj.timer)
						callback?.()
					}
					obj.style.marginLeft = obj.offsetLeft + step + 'px'

				}, time)
			}
		</script>
	</body>
</html>
``
![在这里插入图片描述](https://img-blog.csdnimg.cn/ade18add0ceb4def9f6c29ad89d80d0b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA44OZ6L-c6KGM44Of,size_20,color_FFFFFF,t_70,g_se,x_16)
ベ远行ミ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
js轮播图片小圆点变化_原生js实现轮播图的示例代码
weixin_39855186的博客
12-21 1120
很多网站上都有轮播图，但却很难找到一个系统讲解的，因此这里做一个简单的介绍，希望大家都能有所收获，如果有哪些不正确的地方，希望大家可以指出。原理：将一些图片在一行中平铺，然后计算偏移量再利用定时器实现定时轮播。步骤一：建立html基本布局如下所示：轮播图 12345<>只有五张图片，却使用7张来轮播，这是...
JavaScript案例-js轮播图
02-16
在这个"JavaScript案例-js轮播图"中，我们将深入探讨如何使用纯JavaScript实现一个功能完善的轮播图效果。 首先，轮播图是网页设计中常见的元素，它允许展示一组图片或内容，并在用户交互或定时自动切换之间进行...
JavaScript实现简单的图片切换功能
TomHe789
04-09 572
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片切换</title> <style> *{ margin: 0; padding: ...
JS 轮播图 图片切换（定时器）
热门推荐
qq_38318589的博客
08-13 4万+
JS 轮播图 图片切换（定时器） 这次的轮播图与上次的图片切换相比，仅仅是加上了定时器，使其可以自动切换。 上次的图片切换的链接：https://blog.csdn.net/qq_38318589/article/details/99050117
JS轮播图详解
weixin_75154342的博客
09-17 3673
JS轮播图的实现核心是使用JavaScript来控制图片的切换和显示，配合HTML和CSS完成布局和样式设置。通过定时器实现图片的自动切换，并通过事件监听器实现对鼠标事件的响应。CSS样式：通过CSS样式对容器和列表进行布局和样式设置，例如设置容器的宽度、高度、背景色等，并设置列表项的宽度和高度，以及布局方式，使图片水平排列在一行。调整功能和样式：根据需求，可以进一步调整轮播图的功能和样式，例如添加左右切换按钮、指示器、淡入淡出效果等。HTML结构：首先，在HTML中创建一个包含轮播图的容器，通常使用。
javascript轮播图超详细
周百万的博客
07-06 1万+
鼠标移动到轮播图中显示左右按钮，轮播图片的定时器停止 鼠标移出轮播图隐藏左右按钮，轮播图片的定时器开始 动态创建下面的小圆点 无缝滚动效果 点击左右按钮能切换图片，点击小圆点也能切换到对应的图片中，定时器切换图片 使用时间阀，只有点击左右按钮图片运动完成之后，点击左右按钮才能再次滚动，防止点击左右按钮次数过多，图片滚动过快的情况...
js轮播图实现
qq_53843555的博客
05-29 5298
使用js实现轮播图
【JS基础】JavaScript轮播图代码详解
qq_44580366的博客
07-06 4993
小米轮播图 js 轮播图效果 JavaScript基础项目
JavaScript轮播图
Junnix的博客
01-09 530
JavaScript轮播图 <!-- 定义初始页面图片 --> <img id="and" src="img/1.jpg" width="100%" height="30%"> <script> var i=1; function fun(){ i++ while(i>3){ i=1 }
原生JavaScript轮播图功能的实现
欢愉码农的博客
06-13 1511
class = "current" 用于定位当前显示图片所在位置。
JS轮播图的n种方法
Benxiaohai_311的博客
03-22 1万+
第一种 轮播图, 没有耳朵, 自动轮播, 鼠标放上去会停止, 只需在body里面更改图片宽高和图片路径 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一种轮播图，没有耳朵，自动轮播，鼠标放上去会停止，只需在body里面更改图片宽高和图片路径</title> <style> *.
JavaScript 轮播图.rar
04-08
JavaScript（可能在javascript文件夹中的script.js）是实现轮播图动态功能的关键。主要功能包括： 1. 初始化：获取DOM元素，如轮播图容器、图片列表、控制按钮等，并设置初始状态，比如第一张图片显示，其他隐藏。 ...
JavaScript实现简单图片轮播效果
10-19
主要介绍了JavaScript实现简单图片轮播效果，点击下标切换到该图片上，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javaScript轮播图实现代码
07-07
JavaScript轮播图是一种常见的网页动态效果，用于展示一组图片或内容，通过自动切换或用户交互来呈现连续播放的效果。在给定的资源中，我们有`index.html`作为主页面，`images`目录则包含轮播图所需的图片。以下是...
js轮播图_javascript_
10-03
这个简单的JavaScript轮播图只是一个起点，开发者可以根据需求进行扩展和定制，例如添加触摸滑动支持、响应式设计等，以适应不同设备和屏幕尺寸。通过不断学习和实践，您可以创建出功能丰富、用户体验优秀的轮播图...
Vue前端打包
weixin_63680330的博客
07-04 253
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
Vue 3集成krpano 全景图展示
最新发布
Mr丶GUO
07-06 289
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
JS混淆基本类型和原理
朴拙科技的博客
07-06 416
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
Vue 数据大屏适配
FitnessSnail的博客
07-02 280
不会因为在某一维度上缩放过大而导致元素在另一维度上超出视口。.dataScreen-content 盒子内容根据设计稿给的。（默认为 1920x1080）计算缩放比例，并。的缩放比例，那么元素可能会在某一维度上。，这在很多情况下是不希望发生的。的缩放比例的目的是为了保证。单位进行正常的布局就行。在水平和垂直方向上都。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ベ远行ミ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值