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>
时间： 2024-07-30 12:32:22