标签:大图轮播 overflow height pad osi ati 轮播 element 插入
整体思路;
设一个div,设置宽与高。嵌入一个表格,确定好位置后,插入图片,超出部分隐藏。
在js中定义一个变量接受left的值,并赋值为0px,即初始值
设置一个函数
function a(){在值中减掉一张图片的宽度}
设置一个延时时间
<style> #tu{ width:400px; height:300px; position:relative; margin:50px auto; overflow:hidden; border:1px solid #000;} #sk{ position:relative; left:0px; top:0px; transition:0.5s;} </style> </head> <body> <div id="tu" onclick="Change()"> <table id="sk" cellpadding="0" cellspacing="0"> <tr height="300"> <td><img src="" height="300" /></td> <td><img src="图片" /></td> <td><img src="图片" /></td> <td><img src="图片" height="300" /></td> </tr> </table> </div> </body> </html> <script> document.getElementById("sk").style.top="0px"; function Change() { var sk = parseInt(document.getElementById("sk").style.top); if(sk>-1200) { document.getElementById("sk").style.top=(sk-400)+"px"; } else{ document.getElementById("sk").style.top="0px" } window.setTimeout("Change()",1700) } window.setTimeout("Change()",1700) </script>
标签:大图轮播 overflow height pad osi ati 轮播 element 插入
原文地址:http://www.cnblogs.com/xuan584521/p/6178706.html