【輪播圖特效原理】
（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;
}