前段时间写了一个图片滚动的效果,js还没封装,回头在更新。
-------------------
已更新,支持ie了
贴出来的代码更新了,附件没有更新
-------------------
-------------------
已更新,支持ie了
贴出来的代码更新了,附件没有更新
-------------------
function mmove(){ clearInterval(move); move = setInterval(moveEvent,30); } function moveEvent(){ mleft--; picList.style.marginLeft = mleft + 'px'; if ( mleft == arr[img.length/2-1]-110){ mleft=0; } for(var i=0; i<arr.length;i++){ if(arr[i] == mleft){ clearInterval(move); setTimeout(mmove, 3000); m = 110; } } } if(document.getElementById('picList')){ var picList = document.getElementById('picList'); var img = picList.getElementsByTagName('a'); var mleft = 0; var move = setInterval(moveEvent,30); var info = picList.innerHTML; info += info ; picList.innerHTML = info; for(var i=0;i<img.length;i++ ){ img[i].onmousemove = function(){ clearInterval(move); } img[i].onmouseout = function(){ setTimeout(mmove,30); } } var arr = new Array(); for ( var i=0; i<img.length/2; i++){ arr[i] = -110*i; } }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <style> #picView { width:330px; margin-left:100px; height:110px; overflow:hidden;} #picList { width:1320px; height:110px;} #picView img { width:100px; width:100px; margin:5px; border:0; } #picView a { width:110px; height:110px; float:left;} </style> </head> <body> <div id="picView"> <div id="picList"> <a href="#"><img src="images/1.jpg" /></a> <a href="#"><img src="images/2.jpg" /></a> <a href="#"><img src="images/3.jpg" /></a> <a href="#"><img src="images/4.jpg" /></a> <a href="#"><img src="images/5.jpg" /></a> <a href="#"><img src="images/6.jpg" /></a> </div> </div> </body> <script src="js/picMove.js" type="text/javascript" ></script> </html>