我们打开京东首页时回到看这样的一个轮播图
京东的轮播图主要是通过设置元素的opacity和z-index层级关系实现
效果的主要思路就是
把八张图片通过绝对定位排在同一个位置上面,然后通过CSS设置第一张图片为z-index:1;opacity:1;将其显示出来,然后其他图片属性opacity设为0,z-index默认设为0,这样第一张图片会先显示出来,并且压住其他的图片,然后JS点击事件来控制哪张图片的显示
结构如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!</title>
<!-- 引入css初始化样式表 -->
<link rel="stylesheet" href="css/base.css">
<!-- 引入首页css样式表 -->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- 头部标签结束 -->
<!-- 主体部分开始 -->
<div class="main">
<div class="w">
<div class="main_col2">
<div class="main_silder">
<ul>
<li>
<a href="javascript: ;">
<img src="upload/silder1.jpg" alt="" class="on">
<img src="upload/silder2.jpg" alt="">
<img src="upload/silder3.jpg" alt="">
<img src="upload/silder4.jpg" alt="">
<img src="upload/silder5.jpg" alt="">
<img src="upload/silder6.jpg" alt="">
<img src="upload/silder7.jpg" alt="">
<img src="upload/silder8.jpg" alt="">
</a>
</li>
</ul>
</div>
<button class="btn_left">
<i class="iconfont"></i>
</button>
<button class="btn_right">
<i class="iconfont"></i>
</button>
<div class="tab">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
<!-- 底部制作结束 -->
</body>
<script src="js/index.js"></script>
</html>
JS部分:
// 轮播图
let bannerImg = function () {
let preTime = 0;
// 获取左侧按钮
let btn_left = document.querySelector('.btn_left');
// 获取右侧按钮
let btn_right = document.querySelector('.btn_right');
// 获取小圆点
let imgTab = document.querySelectorAll('.tab ul li');
// 获取所有图片
let main_silder = document.querySelectorAll('.main_silder ul li a img');
// 设置下标
let img_index = 0;
// 设置默认样式(页面刚打开)
imgTab[img_index].style.background = '#fff';
imgTab[img_index].style.boxShadow = '0 0 0 2.5px rgba(255,255,255,.3)';
btn_right.addEventListener('click', function () {
throttle(nextImg, 500);
});
btn_left.addEventListener('click', function () {
throttle(previousImg, 500);
});
// 点击小圆点
for (let i = 0; i < imgTab.length; i++) {
// 给它新建一个属性
imgTab[i].setAttribute('date-index', i);
// 给所有圆点增加点击事件
imgTab[i].addEventListener('click', function () {
// 先清除样式
clearClass();
// 把当前点击的元素属性给img_index
img_index = this.getAttribute('date-index');
// 图片显示
main_silder[img_index].classList.add('on');
// 圆点样式
this.style.backgroundColor = 'white';
this.style.boxShadow = '0 0 0 2.5px rgba(255,255,255,.3)';
})
}
// 清除样式
let clearClass = function () {
for (let i = 0; i < main_silder.length; i++) {
main_silder[i].classList.remove('on');
imgTab[i].style.background = 'rgba(255, 255, 255, .4)';
imgTab[i].style.boxShadow = '0 0 0 0 transparent';
}
}
// 下一张图片
let nextImg = function () {
// 下标加加
img_index++;
// 如果下标超出了所有图片的长度,就设置为第一张
if (img_index >= main_silder.length) {
img_index = 0;
}
// 先清除样式
clearClass();
// 显示当前图片
main_silder[img_index].classList.add('on');
// 设置小圆点的样式
imgTab[img_index].style.background = 'white';
imgTab[img_index].style.boxShadow = '0 0 0 2.5px rgba(255,255,255,.3)';
}
// 上一张图片
let previousImg = function () {
// 下标减减
img_index--;
// 如果下标小于0,显示最后一张图片
if (img_index < 0) {
img_index = main_silder.length - 1;
}
// 先清除其他样式
clearClass();
// 显示当前图片
main_silder[img_index].classList.add('on');
// 设置小圆点的样式
imgTab[img_index].style.background = 'white';
imgTab[img_index].style.boxShadow = '0 0 0 2.5px rgba(255,255,255,.3)';
}
// 防抖
function throttle(fn, delay) {
let now = +new Date();
if (now - preTime >= delay) {
fn();
preTime = now;
}
}
// 设置定时器每隔6秒下一张图片
setInterval(nextImg, 6000);
}
bannerImg();
CSS部分:
/* 这里是鼠标滑过弹出 */
.main_col1 ul li span {
font-size: 12px;
margin: 0 2px;
}
.main_col2 {
float: left;
position: relative;
width: 590px;
height: 470px;
overflow: hidden;
background-color: #fff;
margin-right: 10px;
}
.main_col2 button {
width: 25px;
height: 35px;
line-height: 35px;
background: rgb(0, 0, 0, 0.15);
cursor: pointer;
transition: background .2s ease;
}
.main_col2 button:hover {
background: rgb(0, 0, 0, 0.4);
}
.btn_left {
position: absolute;
z-index: 1;
top: 50%;
left: 0;
padding-right: 5px;
margin-top: -20px;
border-top-right-radius: 18px;
border-bottom-right-radius: 18px;
}
.btn_right {
position: absolute;
top: 50%;
z-index: 1;
right: 0;
padding-left: 5px;
margin-top: -20px;
border-top-left-radius: 18px;
border-bottom-left-radius: 18px;
}
.main_col2 .iconfont {
color: #fff;
font-size: 8px;
}
.main_col2 .main_silder ul li {
float: left;
}
.main_col2 .main_silder a {
display: block;
}
.main_col2 .main_silder ul li img {
position: absolute;
width: 590px;
height: 470px;
opacity: 0;
transition: opacity 1s ease;
}
.main_col2 .main_silder ul li img.on {
opacity: 1;
}
.tab {
position: absolute;
bottom: 15px;
left: 11%;
transform: translateX(-50%);
}
.tab li {
float: left;
list-style: none;
width: 10px;
height: 10px;
margin-left: 5px;
border-radius: 50%;
background-color: rgba(255, 255, 255, .4);
cursor: pointer;
}