以下为HTML代码
<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>
以下为CSS代码
*{
margin: 0;
padding: 0;
}
.banner{
position: relative;
width: 400px;
height: 300px;
margin: 0 auto;
overflow: hidden;
}
.banner ul{
position:absolute;
top: -300px;
left: 0px;
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;
}
以下为JS代码
window.οnlοad=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="translateY(300px)";
bannerImgBar.style.transition="0.5s";
PageUP.disabled=true;
PageDown.disabled=true;
setTimeout(function () {
//在0.5S后删除最后的子元素,然后加在最前面,同时关闭动画时间实现瞬间位移,打开按钮
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="translateY(-300px)";
bannerImgBar.style.transition="0.5s";
PageUP.disabled=true;
PageDown.disabled=true;
setTimeout(function () {
//在0.5S后删除最前面子元素,然后加在最后面,同时关闭动画时间实现瞬间位移,打开按钮
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);
})
}