web前端学习之轮播图实现（原生js）

很久前接触过html css js 但自己在工作中用的少，简单的需求直接vue 走起，没有静下心好好写点js css 什么的，现在想要好好学习下大前端的知识了，第一个小练习，做了个轮播图

网上有很多轮播图的实现过程,每个人都有自己不一样的思路，自己只要实现了就行。当然有些思路确实比我的要好，后续借鉴学习。

逻辑：将要展示的图片全部放在盒子里，超出部分隐藏，然后设置定时器，没两秒循环一次 img 标签，如果display 为block 就将 display 设置为none 那么后面的图片就到当前的div 区域内了，大体思路是这样，当然后面加入了js 时间支持前后翻页，和提示功能

上代码如下：

<!DOCTYPE html>
<html>

<head>
	<title>caroucel</title>
</head>

<style>
	*{
		margin:0;
		padding:0
	}
	.box {
		width: 300px;
		height: 250px;
		border: 1px solid red;
		position: relative
	}

	img {
		width: 300px;
		height: 250px;
	}

	#prev {
		position: absolute;
		top: 50%;
		margin-top: -12px;
		height: 35px;
		width: 15px;
		background-color: rgba(255, 0, 0, .6);
		vertical-align: center;
		line-height: 35px;
		cursor:pointer;

	}

	#next {
		position: absolute;
		top: 50%;
		right: 0;
		margin-top: -12px;
		height: 35px;
		width: 15px;
		background-color: rgba(255, 0, 0, .6);
		vertical-align: center;
		line-height: 35px;
		cursor:pointer;


	}
</style>

<body>
	<div class=‘box‘ style=‘overflow: hidden‘>
		<img src="./1" >
		<img src="./2" >
		<img src="./3" >
		<img src="./4" >
		<img src="./5" >
		<span id=‘prev‘>
		< </span> <span id=‘next‘> >
		</span>
		
	</div><div id=‘dd‘></div>

	<script>
		// 修改样式为块
		function inintBlock() {
			const imgObjs = document.getElementsByTagName("img")
			for (let i = 0; i < imgObjs.length; i++) {
				imgObjs[i].style.display = ‘block‘
			}
		}
		inintBlock()
		function operate() {
			const imgObjs = document.getElementsByTagName("img")
			for (let i = 0; i < imgObjs.length; i++) {
				if (imgObjs[i].style.display === ‘block‘) {
					imgObjs[i].style.display = ‘none‘
					break;
				}
			}
			const state = Array.prototype.slice.call(imgObjs).map(function (item) { return item.style.display })
			const res = state.filter(function (i) { return i === ‘none‘ })
			if (res.length === 5) {
				inintBlock()
			}

		}

		let interval = window.setInterval(
			function () {
				operate()
			}, 2000
		)

		const el = document.getElementsByClassName(‘box‘)[0]

		el.addEventListener(‘mouseenter‘, function (event) {
			window.clearInterval(interval)
		})

		el.addEventListener(‘mouseleave‘, function (event) {
			interval = window.setInterval(function () { operate() }, 2000)
		})

		document.getElementById(‘prev‘).addEventListener(‘click‘,
			//获取当前images 的属性进行遍历，找block属性，修改前一个节点样式
			function () {
				const imgObjs = document.getElementsByTagName("img")
				for (let i = 0; i <imgObjs.length;i++){
					if(imgObjs[i].style.display === ‘block‘){
						if(i-1<0){
							document.getElementsByClassName(‘box‘)[0].nextSibling.innerText = ‘已经是首页了‘
							break;
						}
						imgObjs[i-1].style.display = ‘block‘
						break;
					}
				}
			})

		document.getElementById(‘next‘).addEventListener(‘click‘,function(){
			const imgObjs = document.getElementsByTagName("img")
				for (let i = 0; i <imgObjs.length;i++){
					if(imgObjs[i].style.display === ‘block‘){
						if(i+1>4){
							document.getElementsByClassName(‘box‘)[0].nextSibling.innerText = ‘已经是最后一页了‘
							break;
						}
						imgObjs[i].style.display = ‘none‘
						break;
					}
				}
			
		})

	</script>


</body>

</html>

代码也是很简单的，主要联系下，js 遍历 dom 的操作，孰能生巧，多多练习

web前端学习之轮播图实现（原生js）

有个小问题，如果我想把图片做成动画，淡入淡出，应该怎么搞呢？目前我想到的方法是利用 trasition opacity 进行区域透明度的切换，但是我的轮播图的逻辑也得修改了，不用上面的（将图片全部叠加在一起通过 opacity 控制他们的隐藏显示）

做的过程中有发现个方法，通过定位把几张图片从左往右一次拼接起来，点击的时候向左或者向右触发事件，事件内容是修改各个图片的定位 left right 值从而产生左右翻滚的效果。（z-index 也是个实现的方法）

刚开始感觉下手很难，但做着做着方法也就越来越多，根据需求选择最合适的最适合自己的就好。

web前端学习之轮播图实现（原生js）

相关推荐