小米官網輪播圖

時間 2020-07-18
標籤小米简体版
原文原文鏈接
效果預覽：https://li_shang_shan.gitee.io/imitated_millet_rotation javascript
源碼下載：https://gitee.com/li_shang_shan/imitated_millet_rotationcss
結構代碼以下：html
<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>
我的學習，內容簡略。java
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。