找传奇、传世资源到传世资源站!

js 图片切换代码(上一张、下一张) 历史图库

8.5玩家评分(1人评分)
下载后可评
介绍 评论 失效链接反馈

js 图片切换代码(上一张、下一张) 历史图库 常用JavaScript方法-第1张<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>*{margin:0;padding:0}#box1{width:400px;height:200px; position:relative;margin:50px auto; overflow:hidden;}#box1 ul{width:1600px;height:200px; position: absolute;top:0;left:0; -webkit-transition:1s all ease;}#box1 ul li{width:400px;height:200px; background:yellow; font-size:100px; color:#fff; float:left;}#box2{ text-align:center;}#box2 span{padding:20px; background:red; cursor:pointer; color:#FFF;}</style><script>window.onload=function(){var oBox1=document.getElementById('box1');var oUl=oBox1.children[0];var aLi=oUl.children;var aBtn=document.getElementsByTagName('span');//下一个var iNow=0;aBtn[1].onclick=function(){iNow ;if(iNow==aLi.length)iNow=0;var l=-iNow*400;oUl.style.left=l 'px';};//上一个aBtn[0].onclick=function(){iNow--;if(iNow==-1)iNow=aLi.length-1; //负一 最后一个 length-1;var l=-iNow*400;oUl.style.left=l 'px';};};</script></head><body><div id="box1"><ul> <li style="display:block"><img src="images/01.jpg"></li> <li><img src="images/02.jpg"></li> <li><img src="images/03.jpg"></li> <li><img src="images/04.jpg"></li> </ul></div><div id="box2"><span>上一张</span><span>下一张</span></div></body></html>

评论

发表评论必须先登陆, 您可以 登陆 或者 注册新账号 !


在线咨询: 问题反馈
客服QQ:174666394

有问题请留言,看到后及时答复