首页 > 代码库 > Javascript实现 图片的无缝滚动

Javascript实现 图片的无缝滚动

2024-07-06 20:02:12   226人阅读

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <title></title>
  6     <style type="text/css">
  7         *
  8         {
  9             margin: 0;
 10             padding: 0;
 11         }
 12 
 13         #div1
 14         {
 15             width: 600px;
 16             height: 419px;
 17             position: relative;
 18             background-color: red;
 19             margin: 100px auto;
 20             overflow: hidden;
 21         }
 22 
 23             #div1 ul
 24             {
 25                 position: absolute;
 26                 left: 0;
 27                 top: 0;
 28                 margin: auto;
 29             }
 30 
 31                 #div1 ul li
 32                 {
 33                     float: left;
 34                     width: 630px;
 35                     height: 420px;
 36                     list-style: none;
 37                 }
 38     </style>
 39     <script type="text/javascript">
 40         window.onload = function () {
 41             var oDiv1 = document.getElementById("div1");
 42             var oUl = oDiv1.getElementsByTagName("ul")[0];
 43             var aLi = oUl.getElementsByTagName("li");
 44             var speed = 2;//速度方向
 45 
 46             oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
 47             oUl.style.width = aLi[0].offsetWidth * aLi.length + 100 + "px";
 48 
 49             function move() {
 50                 //左走
 51                 if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
 52                     oUl.style.left = ‘0‘;
 53                 }
 54                 //右走
 55                 if (oUl.offsetLeft > 0) {
 56                     oUl.style.left = -oUl.offsetWidth / 2 + "px";
 57                 }
 58                 oUl.style.left = oUl.offsetLeft + speed + "px";
 59 
 60             }
 61             var timeer = setInterval(move, 30);
 62 
 63             oDiv1.onmouseover = function () {
 64                 //清除定时器
 65                 clearInterval(timeer);
 66             }
 67             oDiv1.onmouseout = function () {
 68                 //打开定时器
 69                 timeer = setInterval(move, 30);
 70             }
 71 
 72             //控制左右的按钮
 73             var aA = document.getElementsByTagName("a");
 74             aA[0].onclick = function () {
 75                 //左侧滚动
 76                 speed =-2;
 77             }
 78 
 79             aA[1].onclick = function () {
 80                 //右侧滚动
 81                 speed =2;
 82             }
 83         }
 84     </script>
 85 </head>
 86 <body>
 87     <center>
 88     <a href="javascript:void(0);">向左走</a>
 89         &nbsp;
 90     <a href="javascript:void(0);">向右走</a>
 91         </center>
 92     <div id="div1">
 93         <ul>
 94             <li>
 95                 <img src="http://www.mamicode.com/images/00_00.jpg" /></li>
 96             <li>
 97                 <img src="http://www.mamicode.com/images/00_01.jpg" /></li>
 98             <!--li>
 99                 <img src="http://www.mamicode.com/images/00_02.jpg" /></!--li>
100             <li>
101                 <img src="http://www.mamicode.com/images/00_03.jpg" /></li-->
102         </ul>
103     </div>
104 
105 </body>
106 </html>

 说明：我的图片尺寸大小是630X419：


联系
我们