<!DOCTYPE HTML><html> ???<head> ???????<title></title> ???????<meta charset="UTF-8"/> ???????<style type="text/css"> ???????????.outter{ ???????????????width: 750px; ???????????????height: 366px; ???????????????margin:100px auto; ???????????????overflow: hidden; ???????????????border: dotted 4px yellowgreen; ???????????} ???????????????????????.inner{ ???????????????width: 400%; ???????????????position: relative; ???????????????left: 0; ???????????} ???????????????????????img{ ???????????????display: block; ???????????????float: left; ???????????} ???????</style> ???</head> ???<body> ???????<div class="outter"> ???????????<div class="inner"> ???????????????<img src="img/111.jpg" /> ???????????????<img src="img/222.jpg" /> ???????????????<img src="img/333.jpg" /> ???????????????<img src="img/111.jpg" /> ???????????</div> ???????</div> ???</body> ???<script type="text/javascript"> ???????var inner = document.querySelector(‘.inner‘); ???????setInterval(scroll,10); ???????????????var l = 0; ???????function scroll(){ ???????????l--; ???????????if(l <= -2250){ ???????????????l = 0;//切换到最后一张时，替换成第一张 ???????????} ???????????inner.style.left = l + "px"; ???????} ???</script></html>js动画之无缝滚动
原文地址：https://www.cnblogs.com/menglong1214/p/9595032.html