轮播图

首先写个容器，设置其大小以及背景图片的大小代码如下

//css
.wrapper{
			width: 400px;
			height: 700px;
			margin: auto 20px;
			background-size: 100% 100%;
			background-repeat: no-repeat; 
		}
	//html
		<div class="wrapper"></div>

然后写一个变换背景图的函数

function  changeimg() {
			if (num < 0) {
				num = 5;
			}
			if (num >= 6) {
				num = 0;
			}
			wrapper.style.backgroundImage = 'url(img/'+ num +'.jpg)'
		}

然后再加入循环以及自增

setInterval(stratloop,1000);

		function stratloop(){
			changeimg();
			num++;
		}

轮播图的基本功能就做好了

但是这样功能是不是太单调了呢，比如如果我想自己看第几张图就看第几张图，等等这样的功能还没又做到。怎么办呢？
我们先要加一个ul和li组合，然后设置其样式

li{
			list-style: none;
		}
		ul{
			position: absolute;
			width: 250px;
			height: 30px;
			left: calc(50% - 125px);
			bottom: 20px;
			display: flex;
			justify-content: space-between;
		}
		ul li{
			width: 30px;
			height: 30px;
			background-color: rgba(251,23,156,0.5);
			color: white;
			line-height: 30px;
			text-align: center;
		}
		

然后我们要让其背景颜色随着图片数量变化而变化。并且，每次变化前都会重置之前的样式

//重置的方法
function rebg(){
			for (let i = 0;i < libtn.length; i++) {
				libtn[i].style.backgroundColor = `rgba(${251},${23},${156},${0.5})`; 
			}
		}
//变换背景颜色
			libtn[num].style.backgroundColor = `rgba(${25},${233},${15},${0.5})`; 

然后我们要加上鼠标移上容器，停止循环定时器并且下面的li标签onmouseenter上去图片会跟着变化。

wrapper.onmouseenter = function (){
			clearInterval(timer);
		}
		wrapper.onmouseleave = function(){
		 timer = setInterval(stratloop,1500);
		}
		for (let j = 0;j < libtn.length;j++) {
			libtn[j].onmouseenter = function(){
				rebg();
				libtn[j].style.backgroundColor = `rgba(${25},${233},${15},${0.5})`;
				num = j;
				wrapper.style.backgroundImage = 'url(img/'+ num +'.jpg)';
			}
		}

然后我们再加上可以前后调节图片的按钮

.wrapper b{
			display: inline-block;
			width:50px;
			height: 120px;
			background-color: rgba(13,59,167,0.3);
			color: white;
			font-size: 38px;
			text-align: center;
			line-height: 120px;
			display: none;
		}
		.wrapper b:nth-of-type(1){
			position: absolute;
			top: calc(50% - 60px);
			left: 0;
		}
		.wrapper b:nth-of-type(2){
			position: absolute;
			top: calc(50% - 60px);
			right: 0;
		}
		//js
		bbtn[0].style.display = 'block';
			bbtn[1].style.display = 'block';
			bbtn[0].style.display = 'none';
			bbtn[1].style.display = 'none';
			bbtn[0].onclick = function(){
			num--;
			changeimg();
		}
		bbtn[1].onclick = function(){
			stratloop();
		}

最后再给wrapper加上切换的特效 transition:all 1.5s; 让切换显得不那么突兀