功能:
鼠标移出恢复滚动;
控制向左向右滚动;
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title > 无缝滚动 </title>
- <style>
- #div1{
- width: 400px;
- height: 100px;
- background: red;
- float: left;
- position: relative;
- margin: 200px;
- overflow: hidden;
- }
- ul{
- float: left;
- list-style: none;
- margin: 0;
- padding: 0;
- position: absolute;
- }
- li{
- float: left;
- display: inline;
- list-style: none;
- }
- img{
- margin: 0;
- width: 100px;
- height: 100px;
- }
- </style>
- <script>
- window.onload = function(){
- var oUl1 = document.getElementsByTagName('ul')[0];
- var timer;
- var speed = -2;
- oUl1.innerHTML += oUl1.innerHTML;
- oUl1.style.width = '800px';
- function move(){
- if(oUl1.offsetLeft <-oUl1.offsetWidth/2){
- oUl1.style.left = '0px';
- }
- if(oUl1.offsetLeft> 0){
- oUl1.style.left = -oUl1.offsetWidth/2 + 'px';
- }
- oUl1.style.left = oUl1.offsetLeft + speed + 'px';
- }
- timer = setInterval(move,30);
- oUl1.onmouseover = function(){
- clearInterval(timer);
- }
- oUl1.onmouseout = function(){
- timer = setInterval(move,30);
- }
- document.getElementsByTagName('a')['0'].onclick = function(){return speed = -2};
- document.getElementsByTagName('a')['1'].onclick = function(){return speed = 2};
- }
- </script>
- </head>
- <body>
- <a href="javascricp:;"> 向左 </a>
- <a href="javascricp:;"> 向右 </a>
- <div id="div1">
- <ul id='ul1'>
- <li><img src="http://p1.so.qhmsg.com/bdr/_240_/t017fa86a892f1b4e06.jpg"></li>
- <li><img src="http://p1.so.qhimgs1.com/bdr/_240_/t01e758a4a1c8f3cf8d.jpg"></li>
- <li><img src="http://p1.so.qhmsg.com/bdr/_240_/t01690c2b67a8ae28a6.jpg"></li>
- <li><img src="http://p0.so.qhimgs1.com/bdr/_240_/t0174cbb4ffbbac0510.jpg"></li>
- </ul>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/note/50845/1ab9d2e4a5f28a8fc6707a0f220491f6.html