原生js（点击按钮换图）

来源：互联网发布：淘宝网怎么代理商品编辑：程序博客网时间：2024/05/16 07:41
<!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.onload=function(){var nowpic=0var myli=document.getElementById("tu1").getElementsByTagName('li')document.getElementById("anniu-r").onclick=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").onclick=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>
0 0