HTML多图无缝循环翻页效果
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>多图无缝循环翻页效果</title> 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 .carousel { 14 width: 1000px; 15 height: 500px; 16 margin: 0 auto; 17 overflow: hidden; 18 } 19 20 .carousel ul li { 21 width: 1000px; 22 height: 500px; 23 list-style-type: none; 24 float: left; 25 } 26 27 .carousel ul li a img { 28 width: 100%; 29 height: 100%; 30 object-fit: contain; 31 } 32 </style> 33 </head> 34 35 <body> 36 <div class="carousel"> 37 <ul> 38 <li> 39 <a href="#"> 40 <img src="https://api.meowv.com/girl" alt="1"> 41 </a> 42 </li> 43 <li> 44 <a href="#"> 45 <img src="https://api.meowv.com/girl" alt="2"> 46 </a> 47 </li> 48 <li> 49 <a href="#"> 50 <img src="https://api.meowv.com/girl" alt="3"> 51 </a> 52 </li> 53 </ul> 54 </div> 55 </body> 56 57 </html> 58 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 59 <script> 60 var carousel = $('.carousel ul'), 61 li = $('.carousel ul li'); 62 carousel.css('width', li.width() * li.length); 63 setInterval(function() { 64 carousel.animate({ 65 'marginLeft': -li.width() 66 }, 500, function() { 67 $(this).animate({ 'marginLeft': 0 }, 0) 68 .find('li').eq(0).appendTo($(this)); 69 }); 70 }, 3000); 71 </script>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· 程序员常用高效实用工具推荐,办公效率提升利器!
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 【译】WinForms:分析一下(我用 Visual Basic 写的)