原生js(点击按钮换图)
2014-02-24 14:43
162 查看
<!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=0 var 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>
相关文章推荐
- 按钮点击事件的实现方式---原生js
- 原生JS实现点击按钮显示更多内容
- 原生 js 实现点击按钮复制文本
- 一道前端面试题:用原生JS实现,点击按钮,alert-button的内容
- 原生JS编写图片切换效果和点击按钮的样式变化
- 原生 js 实现点击按钮复制文本
- 原生js写淡入淡出轮播(点击按钮)
- js+html纯原生代码 简单的下载对话框 点击按钮自动读条
- js 实现点击浏览图片按钮时同时显示图片
- 一段JS代码,点击按钮显示一块区域,再点击则隐藏这块区域
- js实现点击按钮自动生成li
- JS实现点击复选框将按钮或文本框变为灰色不可用的方法
- HTML和iOS的交互,点击html中按钮,ios进行原生方法调用,及ios传值到HTML
- 页面按钮置灰,倒计时多长时间后才能在点击的js
- js点击button按钮跳转到页面代码
- js-按钮点击后变为不可点击状态,防止多次提交
- wabacus框架中点击按钮不反应、出现js错误的处理经验
- js点击按钮切换栏目