标签：
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>图片滚动</title> 5 </head> 6 <body> 7 <style type="text/css"> 8 <!-- 9 *{ 10 margin: 0px; 11 padding: 0px; 12 border: 0px; 13 } 14 #demo { 15 background: #FFF; 16 overflow:hidden; 17 border: 1px dashed #CCC; 18 width: 500px; 19 margin: 300px auto; 20 padding: 20px 0; 21 } 22 #demo img { 23 border: 3px solid #c8c8c8; 24 } 25 #indemo { 26 float: left; 27 width: 800%; 28 } 29 #demo1 { 30 float: left; 31 } 32 #demo2 { 33 float: left; 34 } 35 --> 36 </style> 37 <div id="demo"> 38 <div id="indemo"> 39 <div id="demo1"> 40 <a href="#"><img src="2.png" border="0" /></a> 41 <a href="#"><img src="2.png" border="0" /></a> 42 </div> 43 <div id="demo2"></div> 44 </div> 45 </div> 46 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script> 47 <script type="text/javascript"> 48 var speed = 30, 49 fu = document.getElementById("demo"), 50 child1 = document.getElementById("demo1"), 51 child2 = document.getElementById("demo2"); 52 child2.innerHTML = child1.innerHTML; 53 54 var marquee = function() { 55 if (child2.offsetWidth - fu.scrollLeft <= 0) { 56 fu.scrollLeft -= fu.offsetWidth; 57 } else { 58 fu.scrollLeft++; 59 } 60 }; 61 var inter = setInterval(marquee, speed); 62 63 fu.onmouseover = function() { 64 clearInterval(inter); 65 }; 66 67 fu.onmouseout = function() { 68 inter = setInterval(marquee, speed); 69 }; 70 </script> 71 </body> 72 </html>
标签：
原文地址：http://www.cnblogs.com/jiaxiang/p/4810872.html
