javascript点击左右内容移动效果

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

<!doctype html>
<head>
<title>点击左右内容移动特效</title>
</head>
<style>
body,div,ul,li{margin:0;padding:0;}
ul{list-style:none;}
body{font:12px/1.5 Arial;background:#000;}
#box{position:relative;margin:30px auto;border:8px solid #fff;overflow:hidden;}
#images{position:absolute;left:0;top:0;width:1000%;}
#images li{overflow:hidden;background:#7c0;float:left;border:1px solid #000;text-align:center;line-color:#fff;font-size:28px;font-weight:700;}
#left,#right{position:absolute;top:50%;margin-top:-9px;color:#fff;font-size:18px;height:100%;;cursor:pointer;}
#left{left:0;}
#right{right:0;}
</style>
<script>
	function $(id){	return document.getElementById(id);}
	function getStyle(obj,attr){
		return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,null)[attr];
	}
	window.onload=function(){
		var oBox=$("box");
		var oUl=$("images");
		var aImg=oUl.getElementsByTagName("li");
		var w=aImg[0].offsetWidth;
		var btnL=$("left");
		var btnR=$("right");
		var index=0;
		btnL.onclick=function(){
			if(index==0){
				alert("这是第一张图片了");
				return;
			}
			index--;
			startMove(oUl,'left',-index*w);
		};
		btnR.onclick=function(){
			if(index==aImg.length-1){
				alert("这是最后一张图片了");
				return;
			}
			index++;
			startMove(oUl,'left',-index*w);
		};
		function startMove(obj,attr,iTarget){
			clearInterval(obj.timer);
			obj.timer=setInterval(function(){
				var iCur=parseFloat(getStyle(obj,attr));
				var iSpeed=(iTarget-iCur)/8;
				iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
				iCur==iTarget?clearInterval(obj.timer):obj.style[attr]=iCur+iSpeed+"px";
			},30);
		}
	};
</script>
<body>
<div id="box">
	<ul id="images">
	<li>image 1</li>
	<li>image 2</li>
	<li>image 3</li>
	<li>image 4</li>
	<li>image 5</li>
	</ul>
	<div id="left">左</div>
	<div id="right">右</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

javascript点击左右内容移动效果

相关文章

精彩推荐