点滴积累【JS】---JS小功能(offsetLeft实现图片滚动效果)

效果:

点滴积累【JS】---JS小功能(offsetLeft实现图片滚动效果)_第1张图片

代码:

 1 <head runat="server">
 2     <title></title>
 3     <style type="text/css">
 4         #div1
 5         {
 6             width: 245px;
 7             height: 150px;
 8             background: red;
 9             margin: 250px;
10             margin-left: 500px;
11             position: absolute;
12             overflow: hidden;
13         }
14         #div1 ul li
15         {
16             float: left;
17             width: 44px;
18             height: 66px;
19             margin-top: 20px;
20             margin-right: 5px;
21             list-style: none;
22         }
23         #div1 ul
24         {
25             width: 250px;
26             position: absolute;
27             padding: 0;
28         }
29     </style>
30     <script type="text/javascript">
31         window.onload = function () {
32             var oul = document.getElementsByTagName('ul')[0];
33             var odiv = document.getElementById('div1');
34             var ali = document.getElementsByTagName('li');
35             oul.innerHTML = oul.innerHTML + oul.innerHTML;
36             oul.style.width = (ali[0].offsetWidth + 5) * ali.length + 'px';
37             function roll() {
38                 if (oul.offsetLeft <= -oul.offsetWidth / 2) {
39                     oul.style.left = '0';
40                 }
41                 oul.style.left = oul.offsetLeft - 2 + 'px';
42             }
43             var timer = null;
44             timer = setInterval(roll, 30);
45             odiv.onmouseover = function () {
46                 clearInterval(timer);
47             }
48             odiv.onmouseout = function () {
49                 timer = setInterval(roll, 30);
50             }
51         };
52     </script>
53 </head>
54 <body>
55     <div id="div1">
56         <ul>
57             <li>
58                 <img src="../Images/Number1/0.jpg" /></li>
59             <li>
60                 <img src="../Images/Number1/1.jpg" /></li>
61             <li>
62                 <img src="../Images/Number1/2.jpg" /></li>
63             <li>
64                 <img src="../Images/Number1/3.jpg" /></li>
65             <li>
66                 <img src="../Images/Number1/4.jpg" /></li>
67         </ul>
68     </div>
69 </body>


 

你可能感兴趣的:(left)