无缝滚动-另类-移动端
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui"> 6 <title>Title</title> 7 <style> 8 * 9 { 10 margin: 0; 11 padding: 0; 12 list-style: none; 13 } 14 div 15 { 16 width:100%; 17 /*height: ;*/ 18 } 19 ul 20 { 21 width:100%; 22 height: 385px; 23 white-space: nowrap; 24 } 25 li 26 { 27 width:40%; 28 height: 385px; 29 display: inline-block; 30 font-size: 0;//消除li之间的间隙 31 } 32 li img 33 { 34 width:100%; 35 height: 100%; 36 display: block; 37 } 38 </style> 39 </head> 40 <body> 41 <div> 42 <ul> 43 <li><img src="images/1.png" alt=""></li> 44 <li><img src="images/1.png" alt=""></li> 45 <li><img src="images/1.png" alt=""></li> 46 <li><img src="images/1.png" alt=""></li> 47 <li><img src="images/1.png" alt=""></li> 48 <li><img src="images/1.png" alt=""></li> 49 <li><img src="images/1.png" alt=""></li> 50 <li><img src="images/1.png" alt=""></li> 51 <li><img src="images/1.png" alt=""></li> 52 <li><img src="images/1.png" alt=""></li> 53 <li><img src="images/1.png" alt=""></li> 54 </ul> 55 </div> 56 </body> 57 </html>