javascript无限循环滚动

最新推荐文章于 2025-05-19 21:27:50 发布

最新推荐文章于 2025-05-19 21:27:50 发布 · 183 阅读

文章标签：

#javascript #xhtml #ViewUI

本文介绍了如何使用HTML、CSS和JavaScript实现网页上的动态图片轮播效果，包括样式设计、脚本编写及交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<?xml version="1.0" encoding="UTF-8"?> <!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 { /* 3张图片的宽度（包含宽度、padding、border、图片间的留白）计算：3*(100+2*2+1*2+9) - 9 之所以减去9是第三张图片的右边留白 */ width:336px; /* 图片的宽度（包含高度、padding、border）计算：100+2*2+1*2 */ height:106px; 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><a href="aaaaaaaaaa"><img src="aaaaaa/logo.jpg" width="100px" height="100px" alt=""/></a></li> </ul> </div> <script type="text/javascript"> var id = function(el) { return document.getElementById(el); }, c = id('photo-list'); if(c) { var ul = id('scroll'), lis = ul.getElementsByTagName('li'), itemCount = lis.length, width = lis[0].offsetWidth, //获得每个img容器的宽度 marquee = function() { c.scrollLeft += 2; if(c.scrollLeft % width <= 1){ //当 c.scrollLeft 和 width 相等时，把第一个img追加到最后面 ul.appendChild(ul.getElementsByTagName('li')[0]); c.scrollLeft = 0; }; }, speed = 50; //数值越大越慢 ul.style.width = width*itemCount + 'px'; //加载完后设置容器长度 var timer = setInterval(marquee, speed); c.onmouseover = function() { clearInterval(timer); }; c.onmouseout = function() { timer = setInterval(marquee, speed); }; }; </script> </body> </html>