<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>无限轮播</title> <style> img { height: 200px; width: 500px; float: left; } .show { width: 500px; height: 200px; margin: 0 auto; border: 2px solid rgb(0, 255, 85); /* overflow: hidden; */ } .warp { width: 2000px; position: relative; left: -20px; } .trans { transition: all .5s; } </style> </head> <body> <div class="show"> <div class="warp trans"> <img src="1.jpg" alt="" srcset=""> <img src="2.jpg" alt="" srcset=""> <img src="3.jpg" alt="" srcset=""> <img src="1.jpg" alt="" srcset=""> </div> </div> </body> <script> var show = document.getElementsByClassName("show")[0] var warp = document.getElementsByClassName("warp")[0] var rightStep = 500 time = 1 totleTime = 3 document.addEventListener("transitionend", function () { if (time == totleTime+1) { warp.className = "warp" time = 1 warp.style.left = '0px' } }) document.addEventListener("transitionstart",function(){ time++ }) setInterval(function () { warp.className = "warp trans" warp.style.left = -rightStep * time + 'px' }, 1000) </script> </html>
Comments | NOTHING