轮播图

个人练习

html + css

<style>
	* { margin: 0; padding: 0;}
	#wrap {
		overflow: hidden;
		position: relative;
		width: 300px;
		height: 200px;
		margin: 100px auto;
		background-color: pink;
	}
	#wrap .imgs {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		list-style: none;
		transition: all .5s;
	}
	#wrap .imgs li { float: left; }
	#wrap .imgs li img { width: 300px; height: 200px; }
	#wrap .point {
		position: absolute;
		right: 10px;
		bottom: 5px;
		list-style: none;
	} 
	#wrap .point li {
		float: left;
		width: 20px;
		height: 20px;
		margin: 0 5px;
		border: 1px solid black;
		text-align: center;
		font-size: 12px;
		line-height: 20px;
		border-radius: 50%;
	}
	#wrap .point li.active { background-color: pink; }
</style>

<div id="wrap">
	<ul class="imgs"></ul>
	<ul class="point"></ul>
</div>
	

js

<script type="text/javascript">
	/* 模拟后台获取的图片数据 */
	const imgData = [
		{
			src: ‘./images/1.jpg‘,
			No: ‘1‘
		},
		{
			src: ‘./images/2.jpg‘,
			No: ‘2‘
		},
		{
			src: ‘./images/3.jpg‘,
			No: ‘3‘
		},
		{
			src: ‘./images/4.jpg‘,
			No: ‘4‘
		},
		{
			src: ‘./images/5.jpg‘,
			No: ‘5‘
		}
	]
	
	const imgList = document.querySelector(‘.imgs‘)
	const pointList = document.querySelector(‘.point‘)
	
	/* 创建文档碎片 */
	const frg1 = document.createDocumentFragment()
	const frg2 = document.createDocumentFragment()
	for (let val of imgData) {
		const imgLi = document.createElement(‘li‘)
		const pointLi = document.createElement(‘li‘)
		imgLi.innerHTML = `
			<img src="${val.src}" alt="第${val.No}张图片">
		`
		pointLi.innerHTML = val.No 
		frg1.appendChild(imgLi)
		frg2.appendChild(pointLi)
	}
	imgList.appendChild(frg1)
	pointList.appendChild(frg2)
	
	
	/* 克隆第一张图片放到最后 */
	const firstCopy = imgList.children[0].cloneNode(true)
	imgList.appendChild(firstCopy)
	
	
	/* 设置列表宽度 */
	const imgs = document.querySelectorAll(‘img‘)
	const oneImgWd = parseFloat(getComputedStyle(imgs[0]).width)
	const imgListWd = oneImgWd * imgs.length
	imgList.style.width = imgListWd + ‘px‘	
	
	
	/* 自动轮播 */
	window.timer = setInterval(autoMove, 1500)
	
	/* 点击下标 */
	pointList.addEventListener(‘click‘, clickMove)
	/* 默认给下标1添加激活状态 */
	pointList.children[0].className += ‘ active‘
	
	/* 鼠标移入暂停 */
	imgList.addEventListener(‘mouseenter‘, pauseMove)
	
	/* 鼠标移出继续轮播 */
	imgList.addEventListener(‘mouseleave‘, reMove)
	
	
	function autoMove() {
		//列表的left值
		let imgListLeft = parseFloat(getComputedStyle(imgList).left)
		//每次左移一张
		imgListLeft -= oneImgWd
		//如果left值只剩一张
		if (imgListLeft === -(imgListWd - oneImgWd) ) {
			imgListLeft = 0
		}
		imgList.style.left = imgListLeft + ‘px‘
		//获取切换class的目标
		let index = Math.abs(imgListLeft) / oneImgWd
		let target = pointList.children[index]
		//添加激活状态
		classActive(target)
	}
	
	function clickMove(eve) {
		//清除定时器
		clearInterval(window.timer)
		//获取点击索引
		let index = eve.target.innerHTML - 1
		//移动图片列表
		imgList.style.left = -(index * oneImgWd) + ‘px‘
		//设置下标背景
		classActive(eve.target)
		//重新设置定时器
		window.timer = setInterval(autoMove, 1500)
	}
	
	/* 封装一个切换class的方法 */
	function classActive(target) {
		//获取父元素
		let parent = target.parentElement
		//所有子元素
		let children = parent.children
		//遍历子元素
		for (let val of children) {
			//清除所有子元素class
			val.removeAttribute(‘class‘)
		}
		//切换目标class
		target.className += ‘ active‘
		target.className = target.className.trim()
	}
	
	function pauseMove() {
		//鼠标移入清除定时器
		clearInterval(window.timer)
	}
	
	function reMove() {
		//鼠标移出设置定时器
		window.timer = setInterval(autoMove, 1500)
	}
	
</script>

轮播图

原文：https://www.cnblogs.com/sheep2/p/12760665.html