码迷,mamicode.com
首页 > 移动开发 > 详细

小米官网轮播图

时间:2020-07-17 09:27:28      阅读:118      评论:0      收藏:0      [点我收藏+]

标签:val   body   页面   ros   favicon   one   tab   pos   ade   

效果预览:https://li_shang_shan.gitee.io/imitated_millet_rotation 

源码下载:https://gitee.com/li_shang_shan/imitated_millet_rotation

结构代码如下:

<html>
    <head>
        <meta charset="utf-8" />
        <title>小米轮播图</title>
        <link rel="icon" type="text/css" href="https://s01.mifile.cn/favicon.ico" />
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
                ;
            }

            /* 外层盒子布局 */
            .mi_slideshow_Tab {
                width: 1226px;
                height: 460px;
                margin: 50px auto;
                position: relative;
                background-color: antiquewhite;
            }

            .mi_img img {
                width: 1226px;
                position: absolute;
                cursor: pointer;
            }

            /* 指示器布局 样式*/
            .mi_slideshow_indicator {
                position: absolute;
                z-index: 2;
                right: 20px;
                bottom: 10px;
                transform: rotate(180deg);
            }

            .mi_slideshow_indicator>ul>li {
                display: inline-block;
                z-index: 2;
                width: 8px;
                height: 8px;
                background-color: #6d6d6d;
                border: 2px solid #565656;
                border-style: window-inset;
                border-radius: 45px;
                cursor: pointer;
                margin: 0 1px;
            }

            /* .mi_slideshow_indicator>ul>li:hover{
                background-color: #cecece;
            } */
            #pitch_on {
                background-color: #cecece;
            }

            /* 上一页按钮 下一页按钮 */
            .top_page,
            .next_page {
                width: 41px;
                height: 69px;
                z-index: 2;
                /* background-color: aqua; */
                position: absolute;
                border: none;
                top: 50%;
                margin-top: -34.5px;
                cursor: pointer;
            }

            .top_page {
                left: 234px;
                background: url(img/icon-slides.png) no-repeat -84px 50%;
            }

            .top_page:hover {
                background-position: 0px 50%;
            }

            .next_page {
                right: 0;
                background: url(img/icon-slides.png) no-repeat -125px 50%;
            }

            .next_page:hover {
                background-position: -42px 50%;
            }

            /* 侧边导航选项卡 样式*/
            .mi_Tab {
                width: 234px;
                height: 460px;
                background-color: rgba(105, 101, 101, .4);
                position: absolute;
                left: 0;
                z-index: 2;
            }

            .mi_Tab>ul {
                padding: 20px 0px;
            }

            .mi_Tab>ul>li {
                width: 234px;
                height: 42px;
                list-style: none;
                display: inline-block;
                box-sizing: border-box;
                position: relative;
            }

            .mi_Tab>ul>li>a {
                width: 234px;
                height: 42px;
                display: inline-block;
                text-decoration: none;
                color: #fff;
                line-height: 42px;
                font-size: 14px;
                padding-left: 30px;
                box-sizing: border-box;
            }

            .mi_Tab>ul>li>a:hover {
                background-color: #ff6700;
            }

            .mi_Tab>ul>li>a>span>img {
                color: #fff;
                width: 16px;
                position: absolute;
                right: 18px;
                top: 50%;
                margin-top: -8px;
            }

            /* 侧边选项卡悬浮展示的内容 样式*/
            .mi_Tab_con {
                width: 510px;
                height: 460px;
                position: absolute;
                left: 234px;
                z-index: 2;
                display: none;
                box-shadow: 5px 0px 10px #00ffff;
            }

            .mi_Tab_con ul {
                width: 992px;
                height: 460px;
                font-size: 30px;
                /* box-shadow: 0 0 10px #bebebe; */
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div class="mi_slideshow_Tab">
            <!-- 侧边选项卡 -->
            <div class="mi_Tab">
                <ul>
                    <li>
                        <a href="">
                            手机 电话卡
                            <span>
                                <img src="img/jiantou01.svg">
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            电视 盒子
                            <span>
                                <img src="img/jiantou01.svg">
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            笔记本 显示器 平板
                            <span>
                                <img src="img/jiantou01.svg">
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            家电 插线板
                            <span>
                                <img src="img/jiantou01.svg">
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            出行 穿戴
                            <span>
                                <img src="img/jiantou01.svg">
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            智能 路由器
                            <span>
                                <img src="img/jiantou01.svg">
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            电源 配件
                            <span>
                                <img src="img/jiantou01.svg">
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            健康 儿童
                            <span>
                                <img src="img/jiantou01.svg">
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            耳机 音箱
                            <span>
                                <img src="img/jiantou01.svg">
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            生活 箱包
                            <span>
                                <img src="img/jiantou01.svg">
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 侧选项卡 悬浮展示的内容 -->
            <div class="mi_Tab_con">
                <ul>
                    第一个
                </ul>
                <ul>
                    第二个
                </ul>
                <ul>
                    第三个
                </ul>
                <ul>
                    第四个
                </ul>
                <ul>
                    第五个
                </ul>
                <ul>
                    第六个
                </ul>
                <ul>
                    第七个
                </ul>
                <ul>
                    第八个
                </ul>
                <ul>
                    第九个
                </ul>
                <ul>
                    第十个
                </ul>
                <ul>
                    第十一个
                </ul>
            </div>
            <!-- 底层轮播图 -->
            <div class="mi_slideshow">
                <!-- 轮播照片 -->
                <div class="mi_img">
                    <img src="img/3a82846d975204e12923de52add19339.webp">
                    <img src="img/5ade887b241d057d81e2de96590a1a6f.jpg">
                    <img src="img/6ef43cf9f138a7fc3a39273d7e3d13b6.webp">
                    <img src="img/ad9c1cb79a2eeb2d5ccf54dfa9782032.webp">
                    <img src="img/be3a556e9cd1896f049c122a8bab3ce2.webp">
                </div>
                <!-- 上一页 -->
                <div class="top_page"></div>
                <!-- 下一页 -->
                <div class="next_page"></div>
                <!-- 轮播指示器 -->
                <div class="mi_slideshow_indicator">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li id="pitch_on"></li>
                    </ul>
                </div>
            </div>
        </div>

        <script src="./js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            /* 
                轮播图的js,为了方便区分我写两个 
             */
            $(function() {
                var img_index = $(".mi_img img").length - 1 //获取 图片的张数 -1 拿来当下标索引使用
                // 页面加载时启动定时器   全局定时器 timer
                var timer = setInterval(function() {
                    $(".next_page").trigger("click");
                }, 7000);
                // 点击下一页按钮 触发方法 next_cut_slideshow
                $(".next_page").click(function() {
                    img_index--;
                    if (img_index < 0) {
                        img_index = 4
                    }
                    next_cut_slideshow(img_index);
                });
                // 点击上一页按钮 触发方法 next_cut_slideshow
                $(".top_page").click(function() {
                    img_index++;
                    if (img_index > 4) {
                        img_index = 0
                    }
                    next_cut_slideshow(img_index);
                });
                // 点击指示器按钮 触发方法 next_cut_slideshow
                $(".mi_slideshow_indicator>ul>li").click(function() {
                    img_index = $(this).index();
                    next_cut_slideshow(img_index);
                });
                // 定义轮播图切换方法
                // 点击后的切换方法
                function next_cut_slideshow(img_index) {
                    $(".mi_img img:eq(" + img_index + ")").fadeIn().siblings().fadeOut();
                    $(".mi_slideshow_indicator>ul>li:eq(" + img_index + ")").css({
                        "background-color": "#cecece"
                    }).siblings().css({
                        "background-color": "#6d6d6d"
                    });
                }
                //清除定时器方法  
                $(".mi_slideshow").hover(function() {
                    clearInterval(timer);
                }, function() {
                    timer = setInterval(function() {
                        $(".next_page").trigger("click");
                    }, 7000);
                });
            });

            /* 侧边选项卡 js 选项卡就很简单了,就一个悬浮显现跟隐藏*/
            $(function() {
                $(".mi_Tab>ul>li").hover(function() {
                    var index_Tab = $(this).index(); //获取选项卡下标
                    $(".mi_Tab_con").show() //悬浮 展现存放内容的div
                    $(".mi_Tab_con ul:eq(" + index_Tab + ")").show().siblings().hide(); //展现对应下标的ul,隐藏其他的ul
                }, function() {
                    $(".mi_Tab_con").hide() //离开隐藏
                });
            });
        </script>
    </body>
</html>

个人学习,内容简略。

小米官网轮播图

标签:val   body   页面   ros   favicon   one   tab   pos   ade   

原文地址:https://www.cnblogs.com/2979100039-qq-con/p/13326542.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!