平移轮播图 - 爱码网

这里有两种方法，一种是前后各加一张图片，一种是不添加图片，先做不添加图片的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        img {
            width: 300px;
            height: 300px;
        }
       .box ul{
            display: flex;
            position: relative;
            /*left: -300px;*/
            left: 0px;
        }
        .box {
            overflow: hidden;  /*隐藏*/
            width: 300px;
            height: 300px;
            margin: 0 auto;
            position: relative;
        }
        .btn {
            width: 110px;
            margin: 0 auto;
            text-align: center;
        }
        button {
            width: 50px;
        }
	
    </style>
</head>
<body>
	<div class="box">
		<ul>
			<li><img class="act" src="img/1.jpg"></li>
			<li><img src="img/2.jpg"></li>
			<li><img src="img/3.jpg"></li>
		</ul>
	</div>
	
	<div class="btn">
		<button>左</button>
		<button>右</button>
	</div>
</body>
	<script type="text/javascript">
		var obox=document.getElementsByClassName("box")[0]
		var arrLi = obox.getElementsByTagName("li");
		var arrBtn = document.getElementsByTagName("button");
		var oUl = obox.getElementsByTagName("ul")[0];
		var moDis = arrLi[0].offsetWidth;
		var kai=true;
		//右
		arrBtn[1].addEventListener("click", rgt)
		function rgt() {
			if (kai) {
				kai=false;
				oUl.style.transition = "2s ease";//图片平移过度时间
				oUl.style.left = -moDis + "px";//向左移动的距离
				setTimeout(function () {
					oUl.appendChild(oUl.firstElementChild)
					oUl.style.transition = "none";
					oUl.style.left = 0 + "px";
					kai=true;
				}, 2000)	
			}
		};
		//左
		arrBtn[0].addEventListener("click", lft);
		function lft() {
			if (kai) {
				kai=false;
				oUl.style.transition="none";
				oUl.insertBefore(oUl.lastElementChild,oUl.firstChild);
				oUl.style.left=-moDis+"px";
				setTimeout(function () {
					oUl.style.transition="2s ease";
					oUl.style.left=0+"px";
				},0);				
				setTimeout(function () {
					kai=true;
				},2000);
				
			}
		};

	</script>
</html>

平移轮播图
第二种，加图片的

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		*{
			list-style: none;
			padding: 0;
			margin: 0;
		}
		img{
			width: 300px;
			height: 300px;
		}
		.ul{
			display: flex;
			position: relative;
			left: -300px;
		}
		.box{
			overflow: hidden;
			width: 300px;
			height:300px;
			margin: 0 auto;
			position:relative;
		}
		.btn{
			width: 300px;
			margin: 0 auto;
			text-align: center;
		}
		button{
			width: 50px;
		}
		
	</style>
</head>
<body>
	<div class="box">
		<ul class="ul">
			<li><img src="img/3.jpg"></li>/*最后一张图片多添加一张到最前面*/
			<li><img src="img/1.jpg"></li>
			<li><img src="img/2.jpg"></li>
			<li><img src="img/3.jpg"></li>
			<li><img src="img/1.jpg"></li>/*第一张图片多添加一张到最后面*/
		</ul>
    </div>
    <div class="btn">
		<button><</button>
		 <button>></button>
	 </div>
	
</body>
<script type="text/javascript">
	var arrLi=document.getElementsByTagName("li")
	var arrBtn=document.getElementsByTagName("button")
	var oUl=document.getElementsByTagName("ul")
	var kai=true;
	var a=0	
	arrBtn[1].addEventListener("click",function(){			
		if(oUl[0].style.left=="-1200px"){
			a=0
			oUl[0].style.left=-arrLi[a].offsetWidth+"px"
			oUl[0].style.transition=""
		}
		a++
		oUl[0].style.left=-(a+1)*arrLi[a].offsetWidth+"px"
		oUl[0].style.transition="1s ease"
		setTimeout(function () {
			kai=true;	
		},1000)				
				
	})
	arrBtn[0].addEventListener("click",function(){
		if(kai){
			kai=false;
			if(oUl[0].style.left=="0px"){
				a=2
				oUl[0].style.left=-900+"px";
				oUl[0].style.transition=""
			}
			a--
			oUl[0].style.left=-(a+1)*arrLi[a+1].offsetWidth+"px"	
			oUl[0].style.transition="1s ease"	
			setTimeout(function () {
				kai=true;	
			},1000)	
		}		
	})
</script>
</html>

平移轮播图