原生js實作功能完整輪播圖（自動輪播和點選輪播共同實作）
首先我們來看一下效果圖：
1.打開界面自動播放
2.當滑鼠移入時，自動播放停止，顯示左右點選按鈕；
接着我們來看詳細代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="main.css">
<title>美女輪播圖</title>
</head>
<body>
<div class="all" id="box">
<div class="screen">
<ul>
<li><img src="meinv/11.jpg" alt=""></li>
<li><img src="meinv/22.jpg" alt=""></li>
<li><img src="meinv/33.jpg" alt=""></li>
<li><img src="meinv/44.jpg" alt=""></li>
<li><img src="meinv/55.jpg" alt=""></li>
<li><img src="meinv/66.jpg" alt=""></li>
</ul>
<ol>
</ol>
</div>
<div id="arr">
<span id="left"><</span><span id="right">></span>
</div>
</div>
<script src="index.js"></script>
<script>
//隻要改變ul位置就能實作輪播
var box = myid$("box"); //擷取相框
var inner = box.children[0]; //第一個子元素
var ulObj = inner.children[0]; //擷取ul
var imgWidth = inner.offsetWidth; //擷取圖檔寬度
var list = ulObj.children; //擷取li
var olObj = inner.children[1]; //擷取ol
var pic = 0;
for (let i = 0; i < list.length; i++) {
var liObj = document.createElement("li"); //建立元素
olObj.appendChild(liObj); //插入元素
liObj.innerHTML = (i + 1); //設定内容
liObj.setAttribute("index", i); //設定自定義屬性
//設定滑鼠移入事件
liObj.onmouseover = function () {
for (let j = 0; j < olObj.children.length; j++) {
olObj.children[j].className = null;//周遊全部幹掉樣式
}
this.className = "current";//設定目前對象樣式
pic = this.getAttribute("index");//擷取pic
animate(ulObj, -pic * imgWidth);//設定動畫
};
};
//設定ul中第一個li的樣式
olObj.children[0].className = "current";
//克隆一個ul中第一個li,加入到ul中的最後
//cloneNode()表示克隆參數true表示全部克隆 false表示克隆标簽不帶屬性
//相當于把第一張圖檔在最後又加了一個li顯示
ulObj.appendChild(ulObj.children[0].cloneNode(true));
function f1() {
if (pic == list.length - 1)//此時list長度為本身長度加1 是以倒數二張圖檔就是輪播的最後一張圖
{
pic = 0;//歸零
ulObj.style.left = 0 + "px"; //直接回到第一張
}
pic++;//否則加加 播放下一張圖檔
animate(ulObj, -pic * imgWidth);//調用動畫
if (pic == list.length - 1)//同理設定樣式
{
olObj.children[olObj.children.length - 1].className = null;//此時pic等于6，但是設定樣式是0-5是以這裡幹掉是最後一個的樣式
//第一個按鈕顔色設定上
olObj.children[0].className = "current";
} else {
//幹掉所有的小按鈕的背景顔色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].className = null;
}
olObj.children[pic].className = "current";
}
};
var arr = myid$("arr");
var timeId = setInterval(f1, 1000);
//設定滑鼠移入顯示同時幹掉定時器的自動播放
box.onmouseover = function () {
arr.style.display = "block";
clearInterval(timeId);
};
//滑鼠移出隐藏同時啟動定時器
box.onmouseout = function () {
arr.style.display = "none";
timeId = setInterval(f1, 1000);
};
//右邊點選向右移動
myid$("right").onclick = f1;
//向左移動
myid$("left").onclick = function () {
if (pic == 0) {
// console.log(list.length);
// console.log(olObj.children.length);
pic = olObj.children.length;
ulObj.style.left = -pic * imgWidth + "px";
}
pic--;
animate(ulObj, -pic * imgWidth);
//設定小按鈕的顔色---所有的小按鈕幹掉顔色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].className = null;
}
//目前的pic索引對應的按鈕設定顔色
olObj.children[pic].className = "current";
};
</script>
</body>
</html>
再來看看css代碼：
* {
margin: 0 auto;
padding: 0px;
list-style: nono;
border: 0px;
}
#box {
position: relative;
width: 400px;
height: 640px;
padding: 5px;
border: 1px solid #666;
margin: 100px auto;
}
.screen {
position: relative;
width: 400px;
height: 640px;
overflow: hidden;
}
.screen ul li {
float: left;
width: 400px;
height: 640px;
overflow: hidden;
}
.screen ul {
position: absolute;
width: 3000px;
left: 0px;
top: 0px;
}
img {
width: 400px;
height: 640px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
list-style-type: none;
cursor: pointer;
border-radius: 5px;
}
.all ol li.current {
background: #DB192A;
}
#arr {
display: none;
}
#arr span {
width: 40px;
height: 60px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -30px;
background: #000;
cursor: pointer;
line-height: 60px;
text-align: center;
font-weight: bold;
font-family: '黑體';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
border-radius: 5px;
}
#arr #right {
right: 5px;
left: auto;
}
再來看看我封裝的代碼：
function myid$(myid) {
var id = myid;
return document.getElementById(id);
};
//設定任意的一個元素, 移動到指定的目标位置
//封裝的動畫函數
function animate(element, target) {
clearInterval(element.timeId);
//定時器的id值存儲到對象的一個屬性中
element.timeId = setInterval(function () {
//擷取元素的目前的位置,數字類型
var current = element.offsetLeft;
//每次移動的距離
var step = 10;
step = current < target ? step : -step;
//目前移動到位置
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
//清理定時器
clearInterval(element.timeId);
//直接到達目标
element.style.left = target + "px";
}
}, 10);
};
如有不清楚歡迎留言，想要源檔案也可以給部落客留言；
附資源位址：js輪播圖
想免費擷取的請留言。