javascript实现图片循环滚动效果 |
您所在的位置：网站首页 › 停止放个图片 › javascript实现图片循环滚动效果 |
javascript实现图片循环滚动效果
|
如图，图片实现无缝滚动，点击向左向右滚动控制方向，且当鼠标悬浮在div中时，图片停止滚动；当鼠标离开div中，图片继续滚动。 原理：复制一遍整个ul，给定一个速度让ul向右或向左滚动，当整个ul要滚动到div边界时，再将整个复制的ul向左或向右拖拽直至整个ul中的图片归位。
图①
图②
图③
图④
图⑤
如图图片向左滚动，当运动到图③位置时，offsetLeft就小于二分之一ul的宽度，此时将ul中的第一个图片拉回到起点即图①的位置； 同理当图片向右滚动运动到图④位置，此时在div内部的ul的offsetLeft就大于0，将ul中的第八个图片拉回到原位即图⑤的位置。 上代码： 1 DOCTYPE html> 2 3 4 5 6 无缝滚动，移入暂停 7 8 body,div,ul,li,p 9 { 10 padding: 0; 11 margin: 0; 12 } 13 #div1 14 { 15 position: relative; 16 margin: 10px auto; 17 border: 1px solid black; 18 width: 680px; 19 height:170px; 20 overflow: hidden; 21 } 22 #div1 ul 23 { 24 position: absolute; 25 left:0; 26 } 27 #div1 ul li 28 { 29 float:left; 30 padding: 10px; 31 list-style: none; 32 width: 150px; 33 height: 150px; 34 } 35 #div1 ul li img 36 { 37 width: 150px; 38 height: 150px; 39 } 40 41 42 window.onload = function() 43 { 44 var oDiv = document.getElementById("div1"); 45 var oUl = document.getElementsByTagName("ul")[0]; 46 var oLi = document.getElementsByTagName("li"); 47 var oA = document.getElementsByTagName("a"); 48 var timer = null; 49 var iSpeed = 8; 50 //复制一遍ul 51 oUl.innerHTML +=oUl.innerHTML; 52 //ul的宽度是所有li宽度之和，复制ul之后的整个ul的宽度就是li的长度乘以一个li的宽度 53 oUl.style.width = oLi.length*oLi[0].offsetWidth + "px"; 54 function fnMove() 55 { 56 //图片向左移动时的条件，即在div里的ul的offsetLeft小于一个ul的宽度 57 if (oUl.offsetLeft=0) 64 { 65 //将整个复制的ul向左拖拽直至整个ul中的第一张图归位到起点 66 oUl.style.left = -oUl.offsetWidth/2 + "px"; 67 } 68 //给ul一个速度让整个ul的offsetLeft增加或减少，速度为正则向右移动，速度为负则向左移动 69 oUl.style.left = oUl.offsetLeft +iSpeed + "px"; 70 } 71 timer=setInterval(fnMove,30) 72 //点击向左滚动即触发第一个a元素标签 73 oA[0].onclick = function() 74 { 75 iSpeed = -8; 76 } 77 //点击向右滚动即触发第二个a元素标签 78 oA[1].onclick = function() 79 { 80 iSpeed = 8; 81 } 82 //当鼠标移动到div里面的时候图片滚动暂停，此时清除定时器即可。 83 oDiv.onmouseover = function() 84 { 85 clearInterval(timer); 86 } 87 //当鼠标移出div的时候图片继续滚动，此时重新加载定时器。 88 oDiv.onmouseout = function() 89 { 90 timer=setInterval(fnMove,30); 91 } 92 } 93 94 95 96 97 98 99 100 101 102 103 104 向左滚动 105 向右滚动 106 107
|
【本文地址】