首页 > 代码库 > JS写四个图片滚动显示的效果
JS写四个图片滚动显示的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>4张图片轮换</title> <style type="text/css"> #a{ width:800px; height:500px; position:relative; top:50px; margin:auto; border:2px solid #609; overflow:hidden; } #ta { position:relative; left:0px; top:0px; transition:0.7s; } </style> </head> <body> <div id="a" > <table id="ta" cellpadding="0" cellspacing="0"> <tr height="500" > <td><img src="image/1.jpg" /></td> <td><img src="image/2.jpg" /></td> </tr> <tr height="500" > <td><img src="image/3.jpg" /></td> <td><img src="image/4.jpg" /></td> </tr> </table> </div> </body> </html> <script> document.getElementById("ta").style.left="0px"; document.getElementById("ta").style.top="0px"; function kid() { var m = parseInt(document.getElementById("ta").style.left); var n = parseInt(document.getElementById("ta").style.top); if(m==0&&n==0) { document.getElementById("ta").style.left=-800+"px"; document.getElementById("ta").style.top=0+"px"; } else if(m==-800&&n==0) { document.getElementById("ta").style.left=-800+"px"; document.getElementById("ta").style.top=-500+"px"; } else if(m==-800&&n==-500) { document.getElementById("ta").style.left=0+"px"; document.getElementById("ta").style.top=-500+"px"; } else if(m==0&&n==-500) { document.getElementById("ta").style.left=0+"px"; document.getElementById("ta").style.top=0+"px"; } window.setTimeout("kid()",1000); } window.setTimeout("kid()",1000); </script>
JS写四个图片滚动显示的效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。