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>
复制代码

 

posted @   阿星Plus  阅读(1690)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· 程序员常用高效实用工具推荐,办公效率提升利器!
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 【译】WinForms:分析一下(我用 Visual Basic 写的)
点击右上角即可分享
微信分享提示