标签：src setw tin 思路 div type 像素 rip set
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 做的一个图片无缝轮滚 ， 里面的注释有自己的思路，有不足之处望见谅。
标签：src setw tin 思路 div type 像素 rip set
原文地址：https://www.cnblogs.com/qbhgy/p/9594117.html
