原生js（点击按钮换图）

最新推荐文章于 2022-03-28 09:05:58 发布

爱吃鱼的狐

最新推荐文章于 2022-03-28 09:05:58 发布

阅读量1.1k

点赞数

分类专栏： javascript 文章标签： javascript js 换图

本文链接：https://blog.csdn.net/u013728512/article/details/19822257

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<style type="text/css">
    *{padding:0;border:0;margin:0;}
	#anniu-l,#anniu-r{width:45px;height:45px;background:green;float:left;margin-top:100px;cursor: pointer;}
	#tu{width:660px;height:100px;margin:70px 30px;float:left;position: relative;overflow: hidden}
	#tu ul{list-style:none;width:2000px;height:100px;overflow: hidden;}
	#tu1{position: absolute;left:0px;z-index:1;}
	#tu ul li{float:left;width:100px;height:100px;margin-right:10px;background: red;display:block;}
</style>
<script type="text/javascript">
	window.οnlοad=function(){
		var nowpic=0
		var myli=document.getElementById("tu1").getElementsByTagName('li')
		document.getElementById("anniu-r").οnclick=function(){
			nowpic++;
			console.log(nowpic)
			if(nowpic==0){
			document.getElementById("tu1").style.left="0px";
			}else if(nowpic==1){
			document.getElementById("tu1").style.left="-110px";
			}else if(nowpic==2){
			document.getElementById("tu1").style.left="-220px";
			}else if(nowpic==3){
			document.getElementById("tu1").style.left="-330px";
			}else{
				nowpic=0;
				document.getElementById("tu1").style.left="0px";
			}				
		}
		document.getElementById("anniu-l").οnclick=function(){
			nowpic--;
			console.log(nowpic)
			if(nowpic==0){
			document.getElementById("tu1").style.left="0px";
			}else if(nowpic==-1||nowpic==1){
			document.getElementById("tu1").style.left="-110px";
			}else if(nowpic==-2||nowpic==2){
			document.getElementById("tu1").style.left="-220px";
			}else if(nowpic==-3||nowpic==3){
			document.getElementById("tu1").style.left="-330px";
			}else{
				nowpic=0;
				document.getElementById("tu1").style.left="0px";
			}				
		}
	}
</script>
<body>
        <div id="anniu-l"></div>
	<div id="tu">
		<ul id="tu1">
			<li><img src="1.jpg" /></li>
			<li><img src="2.jpg" /></li>
			<li><img src="3.jpg" /></li>
			<li><img src="4.jpg" /></li>
			<li><img src="5.jpg" /></li>
			<li><img src="6.jpg" /></li>
			<li><img src="7.jpg" /></li>
			<li><img src="8.jpg" /></li>
			<li><img src="9.jpg" /></li>
		</ul>
	</div>
	<div id="anniu-r"></div>
</body>
</html>