標籤：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 做的一個圖片無縫輪滾 ， 裡面的注釋有自己的思路，有不足之處望見諒。
JS -- 圖片無縫輪滾
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
