【网页前端实现多张图片轮播或者切换】三种方法实现

多张 图片 轮播

今天我们主要用三种方式实现多张图片轮播，运用的语言是web中的html，使用软件是HBuilder。
达到以下这种效果：![可以通过下方原点点击或者左右两侧点击进行图片的切换](https://img-blog.csdnimg.cn/59365cb3e7454d0eadc15f9eb57d3d51.png#pic_center)

首先我们看html文件中先建立一个盒子，里面装载所有的图片，叠放在一堆。

&lt;div id="wrap"&gt;
			&lt;ul class="imgs"&gt;
				&lt;li class="active"&gt;<a href="#"><img src="img/1.jpg"/></a></li>
				<li><a href="#"><img src="img/2.jpg"/></a></li>
				<li><a href="#"><img src="img/3.jpg"/></a></li>
				<li><a href="#"><img src="img/4.jpg"/></a></li>
				<li><a href="#"><img src="img/5.jpg"/></a></li>
				<li><a href="#"><img src="img/6.jpg"/></a></li>
				<li><a href="#"><img src="img/7.jpg"/></a></li>
			</ul>
			
			<ul class="lrbtn">
				<li>&amp;lt;</li>
				<li>&amp;gt;</li>
			</ul>
			
			<ul class="btn">
				<li class="on"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>

然后我们通过css 里面的一些设置将图片样式大小进行修饰。

*{
	margin: 0;
	padding: 0;
	
}
#wrap{
	position: relative;/*容器盒子都是设为相对定位*/
	width: 590px;
	height: 470px;
	margin: 50px auto;/*左右居中*/
	
}

/*图前面的小点和箭头去掉*/
#wrap ul{
	list-style: none;
}

/*将图片都叠加到一块(布局)*/
#wrap .imgs li{
	position: absolute;/*所有图片居中集合*/
	display: none;
}
/*当前活动图的展示*/
#wrap .imgs li.active{
	display: block;
}

/*左右按钮的布局*/
#wrap .lrbtn li{
	position: absolute;
	top: 50%;/*垂直布局*/
	margin-top: -40px;/*相对居中*/
	width:40px ;
	height: 80px;
	background-color: white;/*背景色*/
	opacity: 0.5;/*透明度*/
	
	line-height: 80px;/*小箭头垂直居中，行高设置与按钮同高就可以*/
	
}
#wrap .lrbtn li:last-child{
	right: 0;
}

/*轮播按钮的布局设计*/
#wrap .btn{
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	margin: auto;
	
	background-color: pink;
	display: flex;
	width: 210px;
	height: 30px;
	border-radius: 20px;
	
}
#wrap .btn li{
	width: 20px;
	height: 20px;
	flex:1;
	border-radius: 10px;
	background-color: white;
	margin: 5px;
}
#wrap .btn li.on{
	background-color: red;
}

最后用js 动画实现三种方式的图片轮播效果：自动播放，下方按钮点击切换图片以及左右两侧的点击切换上下两张图片。

<script >
			//图片自动轮播方法
			
			
			//下方焦点切换方法
			var curIndex =0;
			var imgs=document.querySelectorAll("#wrap .imgs li")
			var btns=document.querySelectorAll("#wrap .btn li")
			
			/*测试输出*/
			// console.log(btns,imgs)
			
			for(let i=0;i<btns.length;i++){
				btns[i].index=i
				btns[i].onclick=start
			
			}
			function start(){
				 curIndex=this.index;
				 // console.log(curIndex);
				 for(let i=0;i<btns.length;i++){
					 btns[i].classList.remove("on")
					 imgs[i].classList.remove("active")
				 }
				 btns[curIndex].classList.add("on")
				 imgs[curIndex].classList.add("active")
			}
			
			//左右按钮的图片切换方法
			//获取左右按钮
			let left = document.querySelector('#wrap .lrbtn').firstElementChild
			let right = document.querySelector('#wrap .lrbtn').lastElementChild
			//点击左按钮，索引减少，图片切到上一张
			left.onclick = function() {
			if(curIndex===0){
				curIndex=6
			}else{
				curIndex--
			}
			for(let i=0;i<btns.length;i++){
				btns[i].classList.remove("on")
				imgs[i].classList.remove("active")
			}
			btns[curIndex].classList.add("on")
			imgs[curIndex].classList.add("active")
			}
			//点击右按钮，索引增加，图片切到下一张
			right.onclick = function() {
				curIndex=(++curIndex)%7
			for(let i=0;i<btns.length;i++){
				btns[i].classList.remove("on")
				imgs[i].classList.remove("active")
			}
			btns[curIndex].classList.add("on")
			imgs[curIndex].classList.add("active")
			}
			
		</script>