京东官网轮播图的实现
【轮播图特效原理】
（1）页面布局
容器 定位：相对定位 大小：与轮播图实际图片的大小相等
图片 定位：绝对定位 设置图片以块状display:block形式存在，解决3px的bug问题
左右箭头 定位：绝对定位
圆点列表 定位：绝对定位
（2）轮播图的逻辑运行原理
=================================================
【鼠标移入和移出事件】
阻止冒泡 onmouseenter/onmouseleave
有冒泡 onmouseover/onmouseout
冒泡事件：子元素触发某个类型的事件后，该元素的父级以及先辈元素触发同类型的事件
=================================================
【具体代码实现如下】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东轮播图实现</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="container">
<!--定义图片列表-->
<ul id="imgs">
<li class="active"><img src="./a.jpg" alt=""></li>
<li><img src="./b.jpg" alt=""></li>
<li><img src="./c.jpg" alt=""></li>
<li><img src="./d.jpg" alt=""></li>
<li><img src="./e.jpg" alt=""></li>
<li><img src="./f.jpg" alt=""></li>
<li><img src="./g.jpg" alt=""></li>
<li><img src="./h.jpg" alt=""></li>
</ul>
<!--定义圆点列表-->
<ul id="circles">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--左右箭头-->
<div id="left" class="arrow"><</div>
<div id="right" class="arrow">></div>
</div>
<script>
//获取元素
var container = document.getElementById('container');
var lis = container.children[0].children;
var circles = container.children[1].children;
var left = document.getElementById('left');
var right = document.getElementById('right');
var len = lis.length;
//index表示当前所显示图片的下标
var index = 0;
var run;
//将图片轮播封装为一个函数
function turn(){
run = setInterval(function(){
lis[index].removeAttribute('class');
circles[index].removeAttribute('class');
index++;
if(index == len){
index = 0;
}
lis[index].setAttribute('class','active');
circles[index].setAttribute('class','active');
},2000);
}
//启动时，调用函数
turn();
//设置鼠标移入移出容器事件
container.onmouseenter = function(){
//当鼠标移入容器中，停止轮播
clearInterval(run);
}
container.onmouseleave = function(){
//当鼠标移出容器时，继续开始轮播
turn();
}
//设置鼠标移动到圆点上的悬浮事件
for(var i = 0; i < len; i++){
circles[i].onmouseover = (function(i){
return function(){
lis[index].removeAttribute('class');
circles[index].removeAttribute('class');
index = i;
lis[i].setAttribute('class','active');
circles[i].setAttribute('class','active');
}
})(i);
}
//设置左箭头单击事件
left.onclick = function(){
lis[index].removeAttribute('class');
circles[index].removeAttribute('class');
index--;
if(index < 0){
index = len - 1;
}
lis[index].setAttribute('class','active');
circles[index].setAttribute('class','active');
}
//设置右箭头单击事件
right.onclick = function(){
lis[index].removeAttribute('class');
circles[index].removeAttribute('class');
index++;
if(index == len){
index = 0;
}
lis[index].setAttribute('class','active');
circles[index].setAttribute('class','active');
}
</script>
</body>
</html>
【style.css如下】
*{
margin: 0;
padding: 0;
}
img{
/* display: block; */ /*解决图片之间3px的bug问题*/
}
#container{
width:590px;
height:470px;
margin:0 auto;
margin-top: 60px;
position: relative;
}
#container>#imgs{
position: absolute;
}
#container>#imgs>li{
list-style: none;
float: left;
display: none;
}
#container>#imgs>li.active{
display: block;
}
#container>#circles{
width: 152px;
height: 18px;
position: absolute;
left: 46px;
bottom: 20px;
display: flex;
justify-content: space-around;
align-items: center;
}
#container>#circles>li{
list-style: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
}
#container>#circles>li.active{
background: red;
}
#container>div.arrow{
width: 24px;
height: 40px;
position: absolute;
margin-top: -20px;
background: rgba(0,0,0,.2);
font-size: 20px;
color: #fff;
line-height: 40px;
text-align: center;
user-select: none;
cursor: pointer;
}
#container>div.arrow:hover{
background: rgba(0,0,0,.5);
}
#container>div#left{
top: 50%;
left: 0;
}
#container>div#right{
top: 50%;
right: 0;
}
