<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .banner{ position: relative; width: 400px; height: 300px; margin: 0 auto; overflow: hidden; } .banner ul{ position:absolute; top: 0; left: -400px; width: 2000px; height: 300px; list-style: none; } .banner li{ width: 400px; height: 300px; float: left; } .banner input{ position: absolute; width: 80px; height: 30px; border: none; border-radius: 4px; background-color: darkturquoise; color: white; outline-style: none; } #PageUp{ bottom: 30px; left: 40px; } #PageDown{ bottom: 30px; right: 40px; } </style> </head> <body> <div class="banner"> <ul> <li style="background-color: pink"></li> <li style="background-color: aqua"></li> <li style="background-color: yellow"></li> <li style="background-color: chartreuse"></li> </ul> <input id="PageUp" type="button" value="上一页"> <input id="PageDown" type="button" value="下一页"> </div> <script> window.onload=function () { let bannerImgBar=document.getElementsByClassName("banner")[0].getElementsByTagName("ul")[0]; let bannerImg=bannerImgBar.getElementsByTagName("li"); let PageUP=document.getElementById("PageUp"); let PageDown=document.getElementById("PageDown"); PageUP.addEventListener("click",function () { bannerImgBar.style.transform="translateX(400px)"; bannerImgBar.style.transition="0.5s"; PageUP.disabled=true; PageDown.disabled=true; setTimeout(function () { let list=bannerImgBar.removeChild(bannerImg[bannerImg.length-1]); bannerImgBar.insertBefore(list,bannerImgBar.childNodes[0]); bannerImgBar.style.transition="0s"; bannerImgBar.style.transform="translateX(0px)"; PageUP.disabled=false; PageDown.disabled=false; },500); }); PageDown.addEventListener("click",function () { bannerImgBar.style.transform="translateX(-400px)"; bannerImgBar.style.transition="0.5s"; PageUP.disabled=true; PageDown.disabled=true; setTimeout(function () { let list=bannerImgBar.removeChild(bannerImg[0]); bannerImgBar.appendChild(list); bannerImgBar.style.transition="0s"; bannerImgBar.style.transform="translateX(0px)"; PageUP.disabled=false; PageDown.disabled=false; },500); }) } </script> </body> </html>
移动轮播1
猜你喜欢
转载自blog.csdn.net/xinye666666/article/details/80904557
今日推荐
周排行