参考：https://www.cnblogs.com/LIUYANZUO/p/5679753.html
html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>js横向轮播</title> <style type="text/css"> body { margin: 0; } #container { position: relative; width: 100%; height: 300px; overflow: hidden; z-index: -1; } #list { position: absolute; width: 4200px; height: 300px; } #list .img { float: left; /* width: 375px; */ height: 300px; } </style> </head> <body> <div id="container"> <div id="list"></div> </div> </body> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript"> window.onload = function() { var container = document.getElementById('container'), list = document.getElementById('list'), index = 1; $('#list').css('left', -screen.width + 'px'); var timer; var imgList = [{ src: 'img/1.jpg' }, { src: 'img/2.jpg' }, { src: 'img/3.jpg' }, { src: 'img/4.jpg' }, { src: 'img/5.jpg' } ], l = imgList.length - 1, len = imgList.length, w = screen.width, string = ''; string = makeStr(imgList, l); $('#list').append(string); var j = 0; while (j < imgList.length) { string = makeStr(imgList, j); $('#list').append(string); j++; } string = makeStr(imgList, 0); $('#list').append(string); $('#list .img').css('width', screen.width + 'px'); function makeStr(arr, i) { string = "<div class='img' style='background:url(" + arr[i].src + ") no-repeat;background-size:100%'/></div>"; return string; } function animate(offset) { var newLeft = parseInt(list.style.left) + offset; list.style.left = newLeft + 'px'; if (newLeft > -w) { list.style.left = w * len + 'px'; } if (newLeft < -w * len) { list.style.left = -w + 'px'; } } function play() { timer = setInterval(function() { start(); }, 2000) } function start() { index += 1; if (index > len) { index = 1 } animate(-w); }; function stop() { clearInterval(timer); } if (imgList.length > 1) { play(); } } </script> </html> 来源：博客园
作者：林景之
链接：https://www.cnblogs.com/linjiangxian/p/11460760.html