案例：無縫的輪播圖 w <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { list-style: none; ...
案例：無縫的輪播圖
w
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } img { vertical-align: top; } /*取消圖片底部3像素距離*/ .box { width: 300px; height: 200px; margin: 100px auto; background-color: pink; border: 1px solid red; position: relative; overflow: hidden; } .box ul li { float: left; } .box ul { width: 1500px; position: absolute; left: 0; top: 0; } </style> </head> <body> <div class="box" id="screen"> <ul> <li><img src="imagess/01.jpg" alt="" /></li> <li><img src="imagess/02.jpg" alt="" /></li> <li><img src="imagess/03.jpg" alt="" /></li> <li><img src="imagess/04.jpg" alt="" /></li> <li><img src="imagess/01.jpg" alt="" /></li> </ul> </div> <script src="common.js"></script> <script> var current = 0;//只聲明瞭一次 function f1() { //獲取ul裡面的子元素 var ulObj = my$("screen").children[0]; //從當前位置每一次向左移動10px current -= 10; //判斷當前位置超過-1200,就回到0的位置 if (current < -1200) { ulObj.style.left = 0 + "px"; } else { ulObj.style.left = current + "px"; } } var timeId = setInterval(f1, 30) my$("screen").onmouseover = function () { clearInterval(timeId); }; my$("screen").onmouseout = function () { timeId = setInterval(f1, 30) }; </script> </body> </html>
