一、实现原理

1. 官网发现

我们到京东官网去查看首页的轮播图时，可以发现，它其实是通过改变图片的opacity(透明度)和z-index(层级)，再加上过渡效果来实现闪烁效果的。

2. opacity和z-index

当我们点击左箭头或者右箭头的时候，就去改变当前图片的opacity和z-index为0，上一张或者下一张图片的opacity和z-index为1，并且给以过度效果，就可以实现闪烁轮播的效果。

3.定位

对于装有img的父元素，我们应该给其设置相对定位-position: relative;，子元素设置绝对定位-position: absolute;这样就可以让所有的子元素叠加到一块。

二、文档目录

三、HTML结构

<!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>京东轮播图</title><link rel="stylesheet" href="css/index.css">
</head><body><div id="contbox"><ul id="img_list" class="ani"><li style="opacity: 1;z-index:1"><a href="#"><img src="Images/TB1.jpg"></a></li><li><a href="#"><img src="Images/TB2.jpg"></a></li><li><a href="#"><img src="Images/TB3.jpg"></a></li><li><a href="#"><img src="Images/TB4.jpg"></a></li><li><a href="#"><img src="Images/TB5.jpg"></a></li></ul><div id="two_rrow"><a class="arrow left_arrow" href="#"><span></span></a><a class="arrow right_arrow" href="#"><span></span></a></div><div id="dot_list"><a href="#"><span class="dot cur"></span></a><a href="#"><span class="dot"></span></a><a href="#"><span class="dot"></span></a><a href="#"><span class="dot"></span></a><a href="#"><span class="dot"></span></a></div></div><script src="js/Carousel.js"></script>
</body></html>

四、css样式

* {margin: 0;padding: 0;
}a {text-decoration: none;cursor: pointer;
}li {list-style: none;
}#contbox {width: 520px;height: 280px;margin: 10% auto;position: relative;top: 20%;border-radius: 15px;overflow: hidden;
}/* 图片容器 */
#img_list {position: absolute;left: 0;top: 0;width: 100%;height: 280px;
}#img_list>li {transition: opacity 200ms ease-in-out 0s;opacity: 0;width: 520px;height: 280px;position: absolute;left: 0;top: 0;
}#img_list>li>a {position: absolute;width: 100%;height: 100%;
}#img_list>li>a>img {width: 100%;height: 100%;
}/* 指示点 */
#dot_list {position: absolute;z-index: 1;left: 50%;transform: translateX(-50%);bottom: 10px;border-radius: 12px;height: 18px;line-height: 18px;background: rgba(255, 255, 255, 0.4);
}.dot {display: inline-block;width: 10px;height: 10px;border-radius: 50%;background: white;margin: 0 2.5px;
}.cur {background: #ff5000;cursor: default;
}/* 左右箭头 */
.arrow {position: absolute;width: 30px;height: 30px;line-height: 30px;top: 50%;background-color: rgba(0, 0, 0, 0.3);transform: translateY(-15px);text-align: center;z-index: 1;
}.arrow:hover {background-color: rgba(0, 0, 0, 0.5);
}.arrow>span {display: inline-block;width: 10px;height: 10px;position: absolute;top: 50%;border-top: 2px solid white;
}.left_arrow>span {border-left: 2px solid white;transform: rotate(-45deg) translateY(-9px);left: 65%;
}.right_arrow>span {border-right: 2px solid white;transform: rotate(45deg) translateY(-9px);right: 65%;
}.left_arrow {border-top-left-radius: 30%;border-bottom-left-radius: 30%;border-top-right-radius: 50%;border-bottom-right-radius: 50%;left: -8px;
}.right_arrow {border-top-left-radius: 50%;border-bottom-left-radius: 50%;border-top-right-radius: 30%;border-bottom-right-radius: 30%;right: -8px;
}

五、js行为_实现自动轮播与点击效果

var contbox = document.querySelector('#contbox');
//img
var img_ul = document.querySelector('#img_list');
var img_li = document.querySelectorAll('#img_list>li');
var img_listlen = img_li.length;//切换按钮
var left_arrow = document.querySelector('.left_arrow');
var right_arrow = document.querySelector('.right_arrow');//指示点
var dot_list = document.querySelector('#dot_list');
var dot_a = document.querySelectorAll('.dot');//other
var curidx = 0;
var timer = null;// 隐藏函数----实现关键
function hide_Myself() {img_li[curidx].style.opacity = 0;img_li[curidx].style.zIndex = 0;
}
// 显示函数----实现关键
function show_Myself() {img_li[curidx].style.opacity = 1;img_li[curidx].style.zIndex = 1;
}
// 左滑按钮
left_arrow.onclick = function () {hide_Myself()curidx == 0 ? curidx = 4 : curidx--;//边界判断show_Myself()changdot()
};
// 右滑按钮
right_arrow.onclick = function () {hide_Myself()curidx == 4 ? curidx = 0 : curidx++;//边界判断show_Myself()changdot()
};
//自动轮播
function running() {timer = setInterval(function () {//timer用于清除定时器right_arrow.onclick()changdot()//同时改变指示点}, 2500)//每2.5秒自动轮播一次
}
running();
//细节处理
contbox.onmouseenter = function () {clearInterval(timer)//鼠标移动到容器上时，停止自动轮播
}
contbox.onmouseleave = function () {running()//鼠标移开容器之外，开始自动轮播
}
//指示点
function changdot() {for (let i = 0; i < dot_a.length; i++) {if (dot_a[i].classList.contains('cur')) {dot_a[i].classList.remove('cur')break;//如果找到cur类了，就删除cur类，并且立即退出循环}}dot_a[curidx].classList.add('cur');//所有的指示点都没有cur类了，那么给当前指示点添加cur
}
// 为dot自定义属性:data_order（自命名）
for (let i = 0; i < dot_a.length; i++) {dot_a[i].data_order = i;dot_a[i].onclick = function () {curidx = this.data_order;changdot()Jump()// console.log(this.data_order + ":" + curidx);}
}
// 底部原点跳转方法：
function Jump() {//当前curidx的li(既img_li[curidx]),设置到最顶层，其余的被覆盖show_Myself()for (let j = 0; j < img_li.length; j++) {if (curidx == j) {continue;}img_li[j].style.opacity = 0;img_li[j].style.zIndex = 0;// console.log(curidx);// hide_Myself();此处不能直接写函数,因为需要引用j的值作为curidx，循环结束会改变curidx的值}
}

六、效果展示

总结

以上就是今天要讲的内容，在这里并没有用京东的图片，所以图片尺寸不一样。但是实现原理是一样的。
本文仅仅介绍了京东轮播图的简单实现，而真正的实际开发中，我们的需要关注的细节会更多，这样才会让用户的体验更好。好啦，这就是今天的分享咯。886~

原生js模拟实现京东轮播图相关推荐

前端js实现京东轮播图
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>京 ...
京东轮播图——点击轮播
京东轮播图--点击轮播完成效果如下点击左右按钮可以实现图片转化,底下橙色的按钮也随之改变. (图片是在京东上找的,只是觉得比较好看而已) DIV布局 1.整体的一个div容器 2.image布局d ...
用jquery简单的实现京东轮播图效果
用jquery简单的实现京东轮播图效果## 标题 html部分 <!DOCTYPE html> <html lang="en"><head>&l ...
原生JS制作自动+手动轮播图，附带二级分类菜单
原生JS制作自动+手动轮播图,附带二级分类菜单包含以下功能: 1.鼠标移开自动轮播 2.鼠标移入停止自动轮播 3.点击左右按钮可手动切换图片 4.点击索引小圆点可手动切换图片 5.鼠标移入一级菜单展 ...
JavaScript实现京东轮播图效果——自动轮播，左右按钮切换图片，小圆圈跟随图片变化，点击小圆圈可跳转图片，无缝循环播放
JavaScript实现京东轮播图效果--自动轮播,左右按钮切换图片,小圆圈跟随图片变化,点击小圆圈可跳转图片,无缝循环播放静态效果图如下: CSS部分 *{margin: 0;padding: 0 ...
原生JS实现韩雪冬轮播图
分享一个用原生JS实现的韩雪冬轮播图,效果如下: 实现代码如下: <!DOCTYPE html> <html><head lang="en">& ...
2021年原生JS实现韩雪冬轮播图
<!DOCTYPE html> <html><head lang="en"><meta charset="UTF-8" ...
京东图片列表、左侧导航栏、网易新闻列表、京东页面布局、京东轮播图
文章目录京东图片列表京东左侧导航栏网易新闻列表: 京东页面布局京东轮播图京东图片列表代码如下: <head><meta charset="UTF-8" ...
练习（京东图片，导航左侧，网易列表，3school导航条，京东轮播图/电影卡片）
图片列表 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...

原生js模拟实现京东轮播图