JS左右滑动图片,网页区域

发表于 2013-01-09 02:56:08 by 月小升

js 左右滑动的图片基础原理。

<br /> <script> var p=null; var pos = 0; var pianyi = 5; var speed = 20 ; function move(){ window.clearTimeout(p); pos=pos-pianyi; if(pos >= -400){ document.getElementById("tb").style.marginLeft=pos; p = window.setTimeout(move,speed); } document.getElementById("test").innerHTML = pos;</p> <p> }</p> <p> function move2(){ window.clearTimeout(p); pos=pos+pianyi; if(pos <= 0){ document.getElementById("tb").style.marginLeft=pos; p = window.setTimeout(move2,speed); } document.getElementById("test").innerHTML = pos; } </script></p> <style> .main{width:400px;height:400px;float:left;} .red{background:red;} .green{background:green;} .block{width:400px;overflow:hidden;height:400px;margin-left:200px;} .td{border:0px;margin:0px;padding:0px;} </style> <div class="block"> <table id="tb" cellspacing=0 cellpadding=0 border=0> <tr> <td> <div class="main red" id="a1">main1</div> </td> <td> <div class="main green" id="a2">main2</div> </td> </tr> </table> </table> </div> <div id="test"></div> <p><input type="button" onclick="move();" value="submit"></p> <p><input type="button" onclick="move2();" value="right"></p> <p>

效果

---

首发地址：月小升博客 – https://java-er.com/blog/js-left-right/
无特殊说明，文章均为月小升原创，欢迎转载，转载请注明本文地址，谢谢