Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title></title> <style type="text/css">* {Padding: 0; margin: 0;} body {text-align: center ;} # photo-list {/* calculate the width of the three images (including width, padding, border, and whitelist between images: 3*(100 + 2*2 + 1*2 + 9)-9 the reason why 9 is subtracted is that the right side of the third image is White */width: 336px; /* Image width (including height, padding, and border): 100 + 2*2 + 1*2 */height: Pixel px; margin: 50px auto; overflow: hidden; border: 1px dashed # ccc ;}# photo-list ul {list-style: none ;}# photo-list li {float: left; padding-right: 9px ;} # photo-list img {border: 1px solid # ddd; background: # fff; padding: 2px ;}</style></head><body><div id="photo-list"> <ul id="scroll"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></div><script type="text/javascript">Var id = function (el) {return document. getElementById (el) ;}, c = id ('photo-list'); if (c) {varul = id ('scroll '), lis = ul. getElementsByTagName ('Lil'), itemCount = lis. length, width = lis [0]. offsetWidth, // Get the width of each img container marquee = function () {c. scrollLeft + = 2; if (c. scrollLeft % width <= 1) {// When c. when scrollLeft and width are equal, append the first img to the last ul. appendChild (ul. getElementsByTagName ('Lil') [0]); c. scrollLeft = 0 ;}}, speed = 50; // The greater the value, the slower the ul. style. width = width * itemCount + 'px '; // after loading, set the container length var timer = setInterval (marquee, speed); c. onmouseover = function () {clearInterval (timer) ;}; c. onmouseout = function () {timer = setInterval (marquee, speed );};};</script></body></html></td> </tr></table>
Tip: you can modify some code before running
