JS轮播图用tween.js动画库完成,并且有切换功能

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.wrap{
			width: 500px;
			height: 300px;
			position: relative;
			overflow: hidden;
		}
		.box{
			width: 500%;
			height: 100%;
			position: absolute;
			left: 0;
		}
		.box>div{
			width: 500px;
			height: 300px;
			float: left;
			font-size: 100px;
			text-align: center;
			line-height: 300px;

		}
		div:nth-child(1){
			background-color: red;
		}
		div:nth-child(2){
			background-color: green;
		}
		div:nth-child(3){
			background-color: pink;
		}
		div:nth-child(4){
			background-color: blue;
		}
	</style>
</head>
<body>
	<input type="button" value="last">
	<input type="button" value="next">
	<input type="button" value="按钮1" class="ha">
	<input type="button" value="按钮2" class="ha">
	<input type="button" value="按钮3" class="ha">
	<input type="button" value="按钮4" class="ha">
	<div class="wrap">
		<div class="box">
			<div id="one">div1</div>
			<div>div2</div>
			<div>div3</div>
			<div>div4</div>
			<div id="one">div1</div>
		</div>
	</div>
</body>
<script src="./tween.js"></script>
<script>
	//获取元素
	var inps = document.querySelectorAll("input");
	var box = document.querySelector(".box");
	var ha = document.querySelectorAll(".ha");
	//记录图片下标
	var index = 0;
	var w = -500;
	var timer = null;
	//自动播放
	//放在计时器就是自动播放,骑士就是下一张的操作
	function autoImg(){
		index++;
		if(index>3){
			// console.log(index);
			index=0;
			// console.log(index);
		}
		//动画开始时间
		var t = 0;
		//动画结束时间
		var d = 30;
		//动画的起始位置
		var b = box.offsetLeft;
		//动画的终止位置减去动画的起始位置,该变量为-500
		// var c =index*w-b;
		console.log(c);
		var c = -500;
		if(b<=-1500){
			b=0;
		}
		clearInterval(timer);
		timer = setInterval(function(){
			t++;
			box.style.left=Tween.Linear(t,b,c,d)+"px";
			if(t>=d){
				clearInterval(timer);
			}
		},30);
	}
//关闭轮播
	function clearAuto(){
		clearInterval(autotimer);
		 autotimer = setInterval(autoImg,3000);
	}
	var autotimer = setInterval(autoImg,3000);

  //下一张
  inps[1].onclick = function(){
  	clearAuto();
  	autoImg();
  }
  //上一张
  function prevImg(){
		index--;
		if(index<0){
			index=3;
		}
		//动画开始时间
		var t = 0;
		//动画结束时间
		var d = 30;
		//动画的起始位置
		var b = box.offsetLeft;
		//动画的终止位置减去动画的起始位置
		var c =index*w-b;
		clearInterval(timer);
		timer = setInterval(function(){
			t++;
			box.style.left=Tween.Linear(t,b,c,d)+"px";
			if(t>=d){
				clearInterval(timer);
			}
		},30);
	}
 inps[0].onclick = function(){
 	clearAuto();
 	prevImg();
 }
function indexImg(n){
	  index = n;
		var t = 0;
		//动画结束时间
		var d = 30;
		//动画的起始位置
		var b = box.offsetLeft;
		//动画的终止位置减去动画的起始位置
		var c =index*w-b;
		clearInterval(timer);
		timer = setInterval(function(){
			t++;
			box.style.left=Tween.Linear(t,b,c,d)+"px";
			if(t>=d){
				clearInterval(timer);
			}
		},30);
	}
	
  for(var i=0;i<ha.length;i++){
  	(function(i){
  		ha[i].onclick = function(){
  			// box.style.left = (-500*(i-2))+"px";
  			clearAuto();
  			indexImg(i);
  			console.log(i);
  		}
  	})(i);
  

  }

</script>
</html>
JS轮播图用tween.js动画库完成,并且有切换功能

猜你喜欢
