图片点击滑动轮播效果

最新推荐文章于 2024-01-18 22:18:01 发布

闲渔i

最新推荐文章于 2024-01-18 22:18:01 发布

阅读量397

点赞数 12

文章标签： javascript html5 css

本文链接：https://blog.csdn.net/weixin_62556354/article/details/135138779

版权

实现一个点击图片两侧按钮让图片在容器内循环切换的效果，

我的思路是首先展示第二个图片，点击下一张按钮，整体图片往左挪，挪完后将第一个拷贝到最后一个，然后删除第一个，切换上一张原理同理。

效果展示：

CSS样式：

* {
	padding: 0;
	margin: 0;
}
/*设置图片展示位置*/
.son {
	width: 400px;
	height: 400px;
	border: 1px solid red;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}
/*图片div设置s*/
.div {
	position: absolute;
	white-space: nowrap;
	transition: all 500ms;
	left: -400px;
}
/*图片大小设置*/
.son img {
	z-index: 1;
	width: 400px;
	height: 400px;
	transition: 500ms;
}
/*左右按钮样式*/
.left,
.right {
	z-index: 5;
	position: absolute;
	width: 50px;
	height: 400px;
	background-color: black;
	opacity: 0.2;
	line-height: 400px;
	font-size: 80px;
	color: white;
	opacity: 0;
	transition: 500ms;
}
/*左按钮位置*/
.left {
	left: 0;
}
/*右按钮位置*/
.right {
	right: 0
}
/*设置鼠标经过son时按钮显示*/
.son:hover .left,.son:hover .right{
	opacity: 0.3;
}

HTML:

	<body>
		<div class="son">
			<!--左侧按钮-->
			<div class="left" onclick="pre()">
				<span> < </span></div>
			<!--右按钮-->
			<div class="right" onclick="next()">
				<span> > </span>
			</div>
			<!--图片内容-->
			<div class="div">
				<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F2bf1b169-d217-44c3-a5b3-dd00813bc20d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705749043&t=23330623af515773e0bf2e01fa5b3cc8" alt="" />
				<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fac5b9977-78f3-4454-bc17-1f0c054d1e9c%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705749043&t=0da0b741462bac5a6ce97235dcf16acc" alt="" />
				<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fce0cca1b-6473-456a-8f60-a772fa8881af%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705749043&t=cd9f56b59bcd749726ff75bb14a66cc4" alt="" />
				<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fd5d1426d-502b-4a6e-a7dd-92e406fc3ab1%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705749044&t=12e5455d6508c0b5a7dc6a1ee233c601" alt="" />
			</div>
		</div>
	</body>

JavaScript:

// 绑定图片
	var img = document.querySelector(".div").getElementsByTagName("img")
	var div = document.querySelector(".div")
	//绑定父类
	var son = document.querySelector(".son")
	// 绑定左右按钮
	var left = document.querySelector('.left')
	var right = document.querySelector('.right')
	//下一张
	function next() {
//		先将div向左移动400px
		div.style.transform = "translateX(-400px)"
//		div设置了500ms的动画,这边定义一个定时器,下一张完全展示出来后就执行下面操作
		setTimeout(function() {
//			拷贝第一张图片
			var a = img[0].cloneNode(true)
//			将第一张图片加入到最后的位置
			div.appendChild(a)
//			移除第一张图片
			div.removeChild(img[0])
//			将div的过渡动画去除
			div.style.transition = '0ms'
//			把div再挪回去
			div.style.transform = "translateX(0px)"
		}, 500)
//		给div设置回500ms过渡动画
		div.style.transition = '500ms'
	}
	//上一张 原理与下一张相同
	function pre() {
		div.style.transform = `translateX(+400px)`
		var i = img.length - 1
		setTimeout(function() {
			var a = img[i].cloneNode(true)
			div.insertBefore(a, img[0])
			div.removeChild(img[i + 1])
			div.style.transition = '0ms'
			div.style.transform = "translateX(0px)"
		}, 500)
		div.style.transition = '500ms'
	}