1 <!DOCTYPE html> 2 <html lang="cn"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Document</title> 6 ????<style type="text/css"> 7 ????????#box{ 8 ????????????width: 800px; 9 ????????????height: 200px;10 ????????????border: 1px solid #000;11 ????????????margin: 0 auto;12 ????????????overflow: hidden;13 ????????}14 ????????#content{15 ????????????width: 10000px;16 ????????}17 ????????#imglist{float: left;}18 ????????#imglist img{19 ????????????width: 300px;20 ????????????height: 200px;21 ????????????float: left;22 ????????}23 ????</style>24 </head>25 <body>26 ????<h1>图片无缝轮滚</h1>27 ????<hr>28 29 ????<div id="box">30 ????????<div id="content">31 ????????????<div id="imglist">32 ????????????????<img src="./imgs/Meinv001.jpg">33 ????????????????<img src="./imgs/Meinv002.jpg">34 ????????????????<img src="./imgs/Meinv003.jpg">35 ????????????????<img src="./imgs/Meinv004.jpg">36 ????????????????<img src="./imgs/Meinv005.jpg">37 ????????????????<img src="./imgs/Meinv006.jpg">38 ????????????????<img src="./imgs/Meinv007.jpg">39 ????????????????<img src="./imgs/Meinv008.jpg">40 ????????????????<img src="./imgs/Meinv009.jpg">41 ????????????????<img src="./imgs/Meinv010.jpg">42 ????????????????<img src="./imgs/Meinv011.jpg">43 ????????????????<img src="./imgs/Meinv012.jpg">44 ????????????????<img src="./imgs/Meinv013.jpg">45 ????????????????<img src="./imgs/Meinv014.jpg">46 ????????????????<img src="./imgs/Meinv015.jpg">47 ????????????</div>48 ????????</div>49 ????</div>50 51 ????<script>52 53 ????????// 获取一轮图片的宽度54 ????????var width = ?imglist.offsetWidth;55 ????????// 将一轮图片克隆一份追加到当前图片之后.56 ????????content.appendChild(imglist.cloneNode(true));57 58 ????????function scrollImage () {59 ????????????// 判断 一轮图片是否滚完60 ????????????if (box.scrollLeft >= width) {61 ????????????????box.scrollLeft = 0;62 ????????????}63 ????????????// 每次滚动5像素64 ????????????box.scrollLeft += 5;65 ????????????console.log(box.scrollLeft);66 ????????}67 68 ????????// 0.1秒69 ????????setInterval(scrollImage, 100);70 71 ????</script>72 </body>73 </html>
这是一个用JS 做的一个图片无缝轮滚 ， 里面的注释有自己的思路，有不足之处望见谅。
JS -- 图片无缝轮滚
原文地址：https://www.cnblogs.com/qbhgy/p/9594117.html