<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin: 0;padding: 0} .box{ width: 100px; height: 100px; margin: 0 auto; overflow: hidden; } ul{ list-style: none; width: 100px; height: 500px; position: relative; top: -100px; } .backimg1{ width: 100px; height: 100px; background: red; position: relative; top: 0; transition: 1s; } .backimg2{ width: 100px; height: 100px; background: blue; position: relative; top: 0; transition: 1s; } .backimg3{ width: 100px; height: 100px; background: yellow; position: relative; top: 0; transition: 1s; } .backimg4{ width: 100px; height: 100px; background: pink; position: relative; top: 0; transition: 1s; } .box li{ text-align: center; line-height: 100px; } .btn{ width: 100px; height: 30px; margin: 100px auto; display: flex; justify-content: space-around; } </style> </head> <body> <div class="btn"> <input type="button" value="last"> <input type="button" value="next"> </div> <div class="box"> <ul> <li class="backimg4">4</li> <li class="backimg1">1</li> <li class="backimg2">2</li> <li class="backimg3">3</li> </ul> </div> <script> var oinput=document.getElementsByTagName("input"); var oli=document.getElementsByTagName("li"); var ul=document.getElementsByTagName("ul")[0]; oinput[0].onclick=function () { ul.style.transition=1+"s"; ul.style.top=0+"px"; oinput[0].disabled=true; oinput[1].disabled=true; setTimeout(function () { ul.insertBefore(oli[3],oli[0]); oinput[0].disabled=false; oinput[1].disabled=false; ul.style.transition=0+"s"; ul.style.top=-100+"px"; },1000) }; oinput[1].onclick=function () { ul.style.transition=1+"s"; ul.style.top=-200+"px"; oinput[0].disabled=true; oinput[1].disabled=true; setTimeout(function () { ul.appendChild(oli[0]); oinput[0].disabled=false; oinput[1].disabled=false; ul.style.transition=0+"s"; ul.style.top=-100+"px"; },1000) } </script> </body> </html>
上下轮播
猜你喜欢
转载自blog.csdn.net/moonlight201868/article/details/80904022
今日推荐
周排行