jQuery轮播图淡入淡出，小米官网轮播图

最新推荐文章于 2021-03-05 22:09:30 发布

luoyu6

最新推荐文章于 2021-03-05 22:09:30 发布

阅读量936

点赞数 2

CC 4.0 BY-SA版权

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/luoyu6/article/details/82534842

本文提供了一段实现与小米官网类似轮播图效果的jQuery代码，包括淡入淡出效果。作者提供了GitHub源码下载链接，并强调布局时设置li元素为position: absolute以避免轮播时的空白间隙。示例代码详细展示了HTML结构、CSS样式和JavaScript逻辑。此外，作者还分享了一个包含多个小米官网轮播图效果的项目链接。

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

和小米官网轮播图是一样的效果，需要的小伙伴拿走不谢，附上源码下载链接https://github.com/luoyu6/slideshow_xiaomi

注意：写的时候唯一需要的就是布局的时候li元素需要设置成 position: absolute;不然轮播的时候有一段时间出现空白！

以下是效果图（没有动图，只有效果图，凑合看吧尴尬~~）

代码如下

<!DOCTYPE HTML>
<html>

   <head>
       <title>please enter your title</title>
       <meta charset="utf-8">
       <meta name="Author" content="luoyu">
       <style type='text/css'>
           * {
               margin: 0;
               padding: 0;
           }

           li {
               list-style: none;
           }

           #banner {
               width: 730px;
               height: 454px;
               margin: 50px auto;
               position: relative;
           }

           #banner .pic {
               width: 100%;
               height: 100%;
               position: relative;
           }

           #banner .pic ul li {
               position: absolute;
               display: none;
           }

           #banner .tab {
               width: 148px;
               height: 20px;
               position: absolute;
               bottom: 10px;
           &