jquery实现图片的左右滚动。
代码：
<!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>Jquery图片左右滚动-www.jb200.com</title> <script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script> <style> /* CSS reset */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p ,blockquote,th,td{ margin:0; padding:0; font-size:12px; font-family:"宋体";} table{ border-collapse:collapse; border-spacing:0;} fieldset,img{ border:0; display:block;} address,caption,cite,code,dfn,em,strong,th,var{ font-style:normal; font-weight:normal;} ol,ul{ list-style:none;} caption,th{ text-align:left;} h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal;} .scroll{ width:300px; height:110px; overflow:hidden; position:relative; margin:100px auto 0; border:1px solid #ccc;} .scroll ul{ position:absolute; width:3000px;} .scroll li{ float:left; padding:5px 0;} </style> </head> <body> <div class="scroll"> <ul> <li><a href="#" target="_blank"><img src="images/1-1.jpg" width="100" height="100"/></a></li> <li><a href="#" target="_blank"><img src="images/1-2.jpg" width="100" height="100"/></a></li> <li><a href="#" target="_blank"><img src="images/1-3.jpg" width="100" height="100"/></a></li> <li><a href="#" target="_blank"><img src="images/1-4.jpg" width="100" height="100"/></a></li> <li><a href="#" target="_blank"><img src="images/1-5.jpg" width="100" height="100"/></a></li> <li><a href="#" target="_blank"><img src="images/1-6.jpg" width="100" height="100"/></a></li> </ul> </div> <script src="scroll.js"></script> <script type="text/javascript"> function AutoPlay(){ var _scroll = $(".scroll ul"); _scroll.animate({marginLeft : "-100px"},1000,function(){ _scroll.css({marginLeft : "0px"}).find("li:first").appendTo(this); }); } jQuery(function(){ var t = setInterval(function(){ AutoPlay(); },3000); $(".scroll").hover(function(){ clearInterval(t); },function(){ t = setInterval(function(){ AutoPlay(); },3000); }) }) </script> </body> </html>