小米官網輪播圖

来源:https://www.cnblogs.com/2979100039-qq-con/archive/2020/07/16/13326542.html
-Advertisement-
Play Games

效果預覽：https://li_shang_shan.gitee.io/imitated_millet_rotation 源碼下載：https://gitee.com/li_shang_shan/imitated_millet_rotation 結構代碼如下： <html> <head> <meta ...


效果預覽：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("
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • JDBC快速入門
    JDBC快速入門 詳解 １.０DriverManager 功能1 功能2 2.0 connection對象 3.0 statement對象 4.0 ResultSet 遍歷結果集的一個案例 import java.sql.*; public class DQLtest { public static ...
  • MYSQL實現將B表中的欄位值到更新A表中
    根據A表中的id欄位和B表中的id欄位，將B表中name欄位和price欄位值更新到A表中name欄位和price欄位 UPDATE A, BSET A.name = B.name, A.price = B.priceWHERE A.id = B.id ...
  • ORACLE 12C創建wm_concat函數
    0.首先使用dba用戶登錄資料庫，並解鎖wmsys用戶 alter user wmsys account unlock; 1.用WMSYS用戶登錄，不知道密碼可以修改其密碼 alter user wmsys identified by 123456; 2.在wmsys下創建可用的wm_concat函 ...
  • 阿裡：MySQL資料庫規範
    阿裡：MySQL資料庫規範 簡介：基於阿裡資料庫設計規範擴展而來 設計規範 1.【推薦】欄位允許適當冗餘，以提高查詢性能，但必須考慮數據一致。冗餘欄位應遵循: 不是頻繁修改的欄位。 不是 varchar 超長欄位，更不能是 text 欄位。 正例:商品類目名稱使用頻率高，欄位長度短，名稱基本一成不變 ...
  • Navicat 1142 SELECT command denied to user 'sx'@'xxx' for table 'user'
    Navicat 1142 SELECT command denied to user 'sx'@'xxx' for table 'user' 使用Navicat使用sx用戶連接資料庫時或者連接為用戶sx開放的資料庫travel_agency時，Navicat視窗彈出上述問題 ![](D:\博客園\隨 ...
  • MySQL 密碼參數配置與修改 validate_password
    MySQL 密碼參數配置與修改 validate_password 該文章匹配解決MySQL Error中的1819問題 場景 通過root用戶創建travel_agency資料庫，目標是，新建一個用戶然後對僅對該用戶開放travel_agency資料庫而非其他資料庫 過程 創建對所有ip開放的用戶 ...
  • 關於sql
    1. InnoDB支持事務, MyISAM不支持; 2. InnoDB支持外鍵, 而MyISAM不支持; 3. InnoDB是聚集索引,使用B+Tree作為索引結構,數據文件是和(主鍵)索引綁在一起的 MyISAM是非聚集索引, 也是使用B+Tree作為索引結構, 索引和數據文件是分離的, 索引保存 ...
  • 《第一行代碼》第二章
    《第一行代碼》第二章總結 上一章總結是在看完後寫的，感覺遺漏很多，從這章起是邊閱讀邊總結。 由於有了新的事情，《第一行代碼》的總結要停一段時間，但不會太久。 手動創建活動 選擇 Add No Activity ，創建一個活動。 在res 下創建 layout 文件夾，在文件夾下創建 first_la ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類