原生轮播图实现代码

	.container{
		position: relative;
		width:300px;
		height:250px;
		border:solid 2px red;
		overflow: hidden;
	}
	.wrap{
		position: absolute;
		width: 2100px;
		height: 250px;
		z-index: 1;

	}
	.wrap img{
		float: left;
		width:300px;
		height:250px;
	}
	.btn{
		position: absolute;
		/*z-index仅在定位元素上生效*/
		z-index: 2;
		width: 20px;
		height:20px;
		border-radius: 50%;
		background-color: red;
		text-align: center;
	}
	.left{
		top:50%;
		transform: translate(0,-50%);
	}
	.right{
		top:50%;
		left:100%;
		transform: translate(-100%,-50%);
	}
	.left,.right:hover{
		cursor: pointer;
	}

    <div class="container">
    	<div class="wrap"style="left:-300px">
    		<img src="./img/4.jpg">
     		<img src="./img/0.jpg">
    		<img src="./img/1.jpg">
    		<img src="./img/2.jpg">
    		<img src="./img/3.jpg">
    		<img src="./img/4.jpg">
    		<img src="./img/0.jpg">
    	</div>
    	 <span class="left btn"><</span>
    	 <span class="right btn">></span>
    </div>

var wrap=document.querySelector(".wrap");
    	function post(){
    		if (wrap.style.left==="-1800px") {
    			wrap.style.left=-600+"px";
    		}else{
    			wrap.style.left=parseInt(wrap.style.left)-300+"px";
    		}
    		
    	}
    	function pre(){
    		if (wrap.style.left==="0px") {
    			wrap.style.left=-1500+"px"
    		}
    		wrap.style.left=parseInt(wrap.style.left)+300+"px";
    	}
    	var right=document.querySelector(".right");
    	var left=document.querySelector(".left");
    	var timer=null;
    	autoplay();
    	right.onclick=function(){
    		clearInterval(timer);
    		post();
    	}
    	left.onclick=function(){
    		clearInterval(timer);
    		pre();
    	}
    	right.onmouseleave=function(){
    		autoplay();
    	}
    	left.onmouseleave=function(){
    		autoplay();
    	}
    	//实现自动轮播
    	function autoplay(){
    		timer=setInterval(function(){
    		post();
    		// console.log(1);
    	},1000);
    	}