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