轮播图

个人练习

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

/* 模拟后台获取的图片数据 */
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 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) ) {
		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)
}