效果：
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>滚动+停顿</title> <style type="text/css"> body { margin: 0; } #container { position: relative; height: 200px; overflow: hidden; } #list { position: absolute; z-index: 1; width: 4200px; height: 200px; } #list .item { float: left; text-align: center; } .slide { width: 200px; height: 200px; } </style> <script src="js/jquery.js"></script> </head> <body> <div id="container" class="container"> <div id="list"></div> </div> <script type="text/javascript" language=javascript> window.qglist = [{ gimg: 'img/1.jpg', gname: '111' }, { gimg: 'img/2.jpg', gname: '222' }, { gimg: 'img/3.jpg', gname: '333' } ]; initScroll(); function initScroll() { var len = window.qglist.length, j = 0, l = window.qglist.length - 1, string1 = makeStr(window.qglist, l), string2 = makeStr(window.qglist, 0); $('#list').append(string1); while (j < len) { var string = makeStr(window.qglist, j); $('#list').append(string); j++; } $('#list').append(string2); window.scrWid = $('.container')[0].offsetWidth + 'px'; $('#list').css("left", '-' + scrWid); $('.item').css("width", scrWid); var container = $('#container'), list = document.getElementById('list'), index = 1, timer; function animate(offset, unit) { var newLeft = parseInt(list.style.left) - unit, newL = Math.abs(newLeft), scrW = parseInt(window.scrWid), num = newL % scrW; if (num == 0) { stop(); setTimeout(function() { play(); }, 2000); } list.style.left = newLeft + 'px'; //无限滚动判断 if (newLeft > offset) { list.style.left = offset * len + 'px'; } if (newLeft < offset * (len + 1)) { list.style.left = offset + 'px'; } } function play() { //重复执行的定时器 timer = setInterval(function() { start(); }, 1) } function stop() { clearInterval(timer); } function start() { if (index > len) { index = 1 } var n = parseInt(scrWid); animate(-n, 1); index += 1; }; if (len > 1) { play(); } } function makeStr(arr, n) { var str = "<div class='item'><div>" + "<img class='slide' src='" + arr[n].gimg + "'></div></div>"; return str; } </script> </body> </html>
来源：博客园
作者：林景之
链接：https://www.cnblogs.com/linjiangxian/p/11460764.html