小米官网轮播图
效果预览：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>
个人学习，内容简略。
