js轮播的实现

 

 css

	*{
		padding: 0;
		margin: 0;
		list-style: none;
	}
	body{
		background-color: rgb(170,190,250);
	}
	.main{
		width: 500px;
		height: 300px;
		border: 10px solid white;
		border-radius: 5px;
		box-shadow: 20px 30px 20px #333;
		margin: 100px auto;
		position: relative;
		transition: 0.5s ease;
		overflow: hidden;
	}
	.main .image{
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		position: relative;
		transition: 0.5s ease;
	}
	.main a{
		top: 50%;
		position: absolute;
		width: 40px;
		height: 80px;
		line-height: 80px;
		color: white;
		font-size: 18px;
		text-decoration: none;
		text-align: center;
		transform: translate(0,-50%);
		background-color: #33333360;
        display:none;
	}
    .main:hover a{
    display:block;
    }
   	.main .image img{
		width: 100%;
	}
	.main .left{
		left: 0;
	}
	.main .right{
		right: 0;
	}
	
	.btnlist{
		width: 200px;
		height: 40px;
		
		display: flex;
		left: 50%;
		transform: translate(-50%, 0);
		z-index: 8;
		position: absolute;
		bottom: 10px;
		
	}
	.btnlist .btn{
		width: 30px;
		height: 30px;
		background-color: #ECF0F1;
		border-radius: 50%;
	}
	.btn.active{
		background-color: #E74C3C;
	}

html

		<div class="main">
			<div class="image">
				<img src="img/2.jpg" alt="哆啦A梦" class="img">
				<img src="img/3.jpg" alt="哆啦A梦" class="img">
				<img src="img/5.jpg" alt="哆啦A梦" class="img">
				<img src="img/6.jpg" alt="哆啦A梦" class="img">
				<img src="img/7.jpg" alt="哆啦A梦" class="img">
			</div>
			
			<div class="bottom">
				<a href="javascript:;" class="left"><</a>
				<a href="javascript:;" class="right">></a>
			</div>
			
			<ul class="btnlist">
				<li class="btn active" data-n="0"></li>
				<li class="btn" data-n="1"></li>
				<li class="btn" data-n="2"></li>
				<li class="btn" data-n="3"></li>
				<li class="btn" data-n="4"></li>
			</ul>
		
		</div>

js的思路是这样省的:

	//获取图片列表和左右按钮
		var oLeft = document.querySelector('.left');
		var oRight = document.querySelector('.right');
		var oImgList = document.querySelector('.image');
    //创建第五张假图
		let clonefirst = oImgList.firstElementChild.cloneNode();
		oImgList.appendChild(clonefirst);
    //定义索引
		let index=0;

定义一个索引为index

当我点击right>整个框架会向右偏移500px;再点一下会加上500px当index为5时我加上一个假的图片用来过渡;

可能会有人有疑问oImgList.style.transition='none';是用来干嘛的;我在css里设置了过渡;在这里切换假图时会有过渡效果(从右一直滑到左)很丑,那我们可以将过渡暂时去掉等切到假图之后一点时间后切到索引为0的真图;

function handleRight(){
			if(!lock )return;//如果函数节流不为true那么停止下面的函数执行
			index++;
			oImgList.style.left = index * -900 +'px';
			oImgList.style.transition ="0.5s ease";
			
			if(index === 5){
				index =0;
				setTimeout(()=>{
					oImgList.style.left = 0;
					oImgList.style.transition='none';
					console.log(index)
				},500)
			}
			setList();
			lock =false;//关锁
			setTimeout(()=>{
				lock=true;//等图片完全过渡才可以进行下一次点击(开锁)
			},500)
		}
		oRight.addEventListener('click',handleRight)
		
		

左边也是一样

	oLeft.addEventListener('click',()=>{
			if(!lock )return;//如果函数节流不为true那么停止下面的函数执行
			index--;
			if(index === -1){
				oImgList.style.left = 5 * -900 +'px';
				oImgList.style.transition='none';
				index =4;
				setTimeout(()=>{
					oImgList.style.left = index * -900 +'px';
					oImgList.style.transition ="0.5s ease";
				},0);
				
			}else{
				oImgList.style.left = index * -900 +'px';
			}
			setList();
			lock =false;//关锁
			setTimeout(()=>{
				lock=true;//等图片完全过渡才可以进行下一次点击(开锁)
			},500)
		})

然后小圆点

当小圆点的列表下标等于index时,会想小圆点添加一个class active

	//获取主体框架
	const oMain =document.querySelector('.main');
	//获取小圆点列表
	const btnlist = document.querySelector('.btnlist');
	//获取小圆点
	const obtn = document.querySelectorAll('.btn');
	//小圆点高光
	function setCircles(){
		
		for(let i=0;i<obtn.length;i++){
			if(i === index){
				obtn[i].classList.add('active');
			}else{
				obtn[i].classList.remove('active');					
			}
		}
	}   

//点击小圆点跳转图片
	btnlist.addEventListener('click',(e)=>{
		
		if(e.target.nodeName.toLowerCase() === 'li'){
			//node获取元素名称;toLowerCase将他们转换为小写
			var a = Number(e.target.getAttribute('data-n'));
			index =a;
			// console.log(a)
			setCircles()
			oImgList.style.left = index * -500+'px';
		}
	})

最后是轮播我就直接贴上去了

//开启自动轮播
	var abc = 	setInterval(handRight,2000);
	
	oMain.addEventListener('mouseenter',()=>{
		clearTimeout(abc);
		
	})
	oMain.addEventListener('mouseleave',()=>{
		clearTimeout(abc);
		abc = 	setInterval(handRight,2000);
	})