效果預覽：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>
個人學習，內容簡略，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/5418.html
標籤：Html/Css
上一篇：如何用gitee倉庫展示靜態網頁