<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝轮播图</title> <style> #box{ width: 900px; height: 300px; position: relative; margin: 200px auto; } #imgBox{ height: 300px; width: 900px; position: absolute; overflow: hidden; } #imgBox img{ position: absolute; z-index: 1; } #btn{ width: 900px; height: 300px; position: relative; z-index: 4; } #btn img{ width: 20px; height: 20px; position: absolute; cursor: pointer; } #btn img:first-child{ left:10px; top:140px; } #btn img:last-child{ right:10px; top:140px; } @keyframes moveRight{ 0%{left:900px;} 100%{left:0;} } @keyframes moveLeft{ 0%{left:0;} 100%{left:-900px;} } @keyframes moveRight2{ 0%{left:0px;} 100%{left:900px;} } @keyframes moveLeft2{ 0%{left:-900px;} 100%{left:0px;} } </style> </head> <body> <div id="box"> <div id="imgBox"> <img src="11.jpg" alt="" id="1"> <img src="22.jpg" alt="" id="2"> <img src="33.jpg" alt="" id="3"> </div> <div id="btn"> <img src="left.png" alt="" id="left"> <img src="right.png" alt="" id="right"> </div> </div> </body> </html>
js部分
<script> var imgArr=document.getElementById('imgBox').children; var left=document.getElementById('left'); var right=document.getElementById('right'); var tem; arr=Array.from(imgArr); left.onclick=function () { arr[0].style.zIndex=1; arr[arr.length-1].style.animation='moveLeft 1s'; arr[arr.length-1].style.zIndex=2; arr[arr.length-2].style.animation='moveRight 1s'; arr[arr.length-2].style.zIndex=3; tem=arr.pop(); arr.unshift(tem); }; right.onclick=function () { arr[arr.length-2].style.zIndex=1; arr[arr.length-1].style.animation='moveRight2 1s'; arr[arr.length-1].style.zIndex=2; arr[0].style.animation='moveLeft2 1s'; arr[0].style.zIndex=3; tem=arr.shift(); arr.push(tem); } </script>