js实现轮播图

HTML

<div class="banner">
	<div class="swiper">
		<div class="swiper-item show"><img src="../img/1-1.jpg"></div>
		<div class="swiper-item"><img src="../img/1-2.jpg"></div>
		<div class="swiper-item"><img src="../img/1-3.jpg"></div>
		<div class="swiper-item"><img src="../img/1-4.jpg"></div>
		<button type="button" id="prePic">上一张</button>
		<button type="button" id="nextPic">下一张</button>
		<div class="dot">
			<span class="on"></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
	</div>
</div>

 CSS

		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.banner{
				width: 1920px;
				height: 860px;
				margin: 0 auto;
			}
			.swiper {
				width: 1920px;
				height: 860px;
				position: relative;
				border: 1px solid red;
			}

			.swiper-item {
				width: 1920px;
				height: 860px;
				background-color: #00FFFF;
				position: absolute;
				opacity: 0;
				/* 实现淡入淡出 */
				transition: all 2s ease;
			}

			.swiper-item:nth-of-type(2n) {
				background-color: #0099FF;
			}

			.swiper-item>img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.show {
				opacity: 1;
			}

			#prePic {
				position: absolute;
				left: 0;
				top: 42%;
				width: 25px;
				height: 60px;
				display: none;
			}

			#nextPic {
				position: absolute;
				right: 0;
				top: 42%;
				width: 25px;
				height: 60px;
				display: none;
			}

			.on {
				background-color: red !important;
			}

			.dot {
				position: absolute;
				width: 140px;
				height: 40px;
				bottom: 20px;
				right: 40px;
			}

			.dot span {
				display: inline-block;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background-color: #FFFFFF;
			}
		</style>

 js

<script type="text/javascript">
			/* **************************获取元素************************* */
			var swiper = document.querySelector('.swiper')
			var swiperItem = document.querySelectorAll('.swiper-item')
			var dots = document.querySelector('.dot')
			var spans = document.querySelectorAll('span')
			var prePic = document.getElementById('prePic')
			var nextPic = document.getElementById('nextPic')
			swiperItem = Array.from(swiperItem);
			spans = Array.from(spans);
			var index = 0;

			/* **************************自动播放************************* */
			function play() {
				index++
				if (index >= 4) {
					index = 0
				}
				showItem();
				showdot()
			}
			//定时器实现不断切换
			var id = setInterval(play, 3500)

			/* **************************鼠标移入移出************************* */
			//鼠标移出开始轮播
			swiper.onmouseout = function() {
				id = setInterval(play, 3500)
				prePic.style.display = 'none';
				nextPic.style.display = 'none';
			}

			//鼠标移入开始轮播
			swiper.onmouseover = function() {
				clearInterval(id)
				prePic.style.display = 'block';
				nextPic.style.display = 'block';
			}

			/* **************************实现swiper-item的切换************************* */
			function showItem() {
				//清除show
				//document.querySelector('.swiper .show').classList.remove('show');
				for (var i = 0; i < swiperItem.length; i++) {
					swiperItem[i].classList.remove('show')
				}
				//添加show
				swiperItem[index].classList.add('show')
			}
			/* **************************对应圆点指示************************* */
			function showdot() {
				//清除on
				for (var i = 0; i < spans.length; i++) {
					spans[i].classList.remove('on')
				}
				//添加on
				spans[index].classList.add('on')
			}
			/* **************************点击圆点(事件代理实现)************************* */
			dots.addEventListener('click',function(){
				//获取下标
				console.log(event.target);
				var ind = Array.from(spans).indexOf(event.target);
				if(ind!=-1){
					index=ind;
					showItem();
					showdot();
				}
			})
			/* **************************上一张和下一张************************* */
			//上一张
			prePic.onclick = function() {
				index--;
				if (index < 0) {
					index = 3;
				}
				showItem();
				showdot()
			}
			//下一张
			nextPic.onclick = function() {
				index++;
				if (index > 3) {
					index = 0;
				}
				showItem();
				showdot()
			}
		</script>