首页 > 代码库 > javascript无缝滚动示例
javascript无缝滚动示例
效果
图片大小均为200*200;
默认向左循环滚动;
鼠标悬浮暂停，鼠标移走继续滚动;
可以在此基础进行扩展。
下面是代码：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>无缝滚动</title> 6 <style> 7 *{ 8 padding:0px; 9 margin:0px; 10 } 11 #main{ 12 width:800px; 13 margin:100px auto; 14 text-align:center; 15 } 16 #box{ 17 width:800px; 18 height:200px; 19 margin:20px auto; 20 position:relative;/*相对于起点*/ 21 /*background:red;*/ 22 overflow:hidden; 23 } 24 ul{ 25 position:absolute; 26 left:0px; 27 top:0px; 28 } 29 ul li{ 30 list-style:none; 31 width:200px; 32 height:200px; 33 float:left; 34 margin:0px 1px; 35 } 36 #main button{ 37 padding:10px; 38 margin:0px 10px; 39 border:0px; 40 background:#ddd; 41 } 42 #main button:hover{ 43 background:#E9AF16; 44 cursor:pointer; 45 } 46 </style> 47 </head> 48 <body> 49 <div id="main"> 50 <h2>无缝滚动</h2> 51 <div id="box"> 52 <ul> 53 <li><img src="images/p1.jpg" alt="p1"></li> 54 <li><img src="images/p2.jpg" alt="p2"></li> 55 <li><img src="images/p3.jpg" alt="p3"></li> 56 <li><img src="images/p4.jpg" alt="p4"></li> 57 </ul> 58 </div> 59 <button>向左</button><button>向右</button> 60 </div> 61 62 <script> 63 var oBox=document.getElementById("box"); 64 var aUl=oBox.getElementsByTagName("ul")[0]; 65 var aLi=oBox.getElementsByTagName("li"); 66 var speed=2; 67 68 aUl.innerHTML=aUl.innerHTML+aUl.innerHTML;//使li增加一倍 69 aUl.style.width=aLi[0].offsetWidth*aLi.length+"px";//修改aUl框的宽度,注意单位 70 71 function move(){ 72 //向左移动aUl.offsetLeft是负的,我们需要把aUl的一半宽度放置在div右侧 73 if(aUl.offsetLeft<-aUl.offsetWidth/2){ 74 aUl.style.left=0+"px";//将ul放回原位 75 } 76 //向右移动aUl.offsetLeft是大于0的,我们需要把aUl的一半宽度放置在div左侧 77 if(aUl.offsetLeft>0){ 78 aUl.style.left=-aUl.offsetWidth/2+"px";//放置在div左侧,left为负值 79 } 80 aUl.style.left=aUl.offsetLeft-speed+"px";//整体移动ul,右 81 } 82 83 timer=setInterval(move,30); 84 85 aUl.onmouseover=function(){ 86 clearInterval(timer); 87 } 88 89 aUl.onmouseout=function(){ 90 timer=setInterval(move,30); 91 } 92 93 var aBtn=document.getElementsByTagName("button"); 94 aBtn[0].onmouseover=function(){ 95 speed=2; 96 } 97 aBtn[1].onmouseover=function(){ 98 speed=-2; 99 }100 </script>101 </body>102 </html>
javascript无缝滚动示例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。