代碼
話不多說，先上代碼，方便復制粘貼。演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
img {
display: block;
width: 100%;
height: 100%;
}
.content {
width: 1080px;
margin: 100px auto;
}
.banner {
position: relative;
overflow: hidden;
}
.banner>div {
width: 790px;
position: absolute;
transform: translateX(140px) scale(0.8);
transform-origin: center bottom;
transition: .4s;
}
.banner .first_item {
z-index: 10;
transform: translateX(140px) scale(1);
}
.banner .second_item {
z-index: 1;
transform: translateX(540px) scale(0.8);
}
.banner .last_item {
z-index: 1;
transform: translateX(-250px) scale(0.8);
}
/* 左右切換按鈕 */
.btn {
width: 40px;
height: 40px;
position: absolute;
top: 60%;
margin-top: -20px;
background-color: rgba(0, 0, 0, 0.2);
z-index: 1;
text-align: center;
color: rgba(255, 255, 255, 0.6);
line-height: 40px;
font-size: 20px;
font-style: normal;
cursor: pointer;
user-select: none;
}
.btn_right {
right: 0;
}
.btn:hover {
background-color: rgba(0, 0, 0, 0.4);
color: rgba(255, 255, 255, 1);
}
/* banner狀態點 */
.track {
display: flex;
justify-content: center;
overflow: hidden;
}
.track>span {
display: block;
width: 25px;
height: 4px;
background-color: #ccc;
float: left;
margin: 10px 6px;
transition: .4s;
}
.track .focus {
background-color: #c60023;
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="content">
<div class="banner">
<div class="first_item">
<a href="#"><img src="img/banner/banner1.jpg" alt=""></a>
</div>
<div class="second_item">
<a href="#"><img src="img/banner/banner2.jpg" alt=""></a>
</div>
<div class="">
<a href="#"><img src="img/banner/banner3.jpg" alt=""></a>
</div>
<div class="">
<a href="#"><img src="img/banner/banner4.jpg" alt=""></a>
</div>
<div class="last_item">
<a href="#"><img src="img/banner/banner5.jpg" alt=""></a>
</div>
<!-- 這里切換按鈕用大於小於號代替，如果自己有icon圖標自行替換 -->
<i class="btn_left btn"><</i>
<i class="btn_right btn">></i>
</div>
<div class="track"></div>
</div>
<script>
window.onload = function () {
// 獲取節點，變量聲明
var banner = document.querySelector('.banner'),
btn_left = document.querySelector('.btn_left'),
btn_right = document.querySelector('.btn_right'),
track = document.querySelector('.track'),
list_items = banner.querySelectorAll('div'),
listArr = [],
index = 0,
trackHtml = '',
tracks,
timer;
// 初始化
function init() {
// 根據圖片高度自適應
banner.style.height = list_items[0].offsetHeight + 'px';
// 生成track坐標點元素
for (var i = 0, len = list_items.length; i < len; i++) {
listArr.push(list_items[i].className)
trackHtml += '<span></span>'
}
track.innerHTML = trackHtml;
// 獲取坐標點元素
tracks = track.querySelectorAll('span');
tracks[0].setAttribute('class', 'focus');
play();
}
// 切換動畫 target=1 下一張 target=-1 上一張
function move(target) {
list_items.forEach((item, i) => {
item.setAttribute('class', listArr[i])
});
// 計算index下標值
index = (index + listArr.length + target) % listArr.length;
tracks.forEach((item, i) => {
item.setAttribute('class', '')
});
tracks[index].setAttribute('class', 'focus')
}
// 下一張
function next() {
listArr.unshift(listArr[listArr.length - 1]);
listArr.pop();
move(1)
}
// 上一張
function previous() {
listArr.push(listArr[0]);
listArr.shift();
move(-1)
}
// 自動輪播
function play() {
timer = setInterval(next, 4000);
}
// 下一張綁定點擊事件
btn_right.onclick = function () {
clearInterval(timer);
next();
play();
};
// 上一張綁定點擊事件
btn_left.onclick = function () {
clearInterval(timer);
previous();
play();
};
// track綁定點擊事件
track.addEventListener('click', function (e) {
var e = e || window.e,
//標准瀏覽器用ev.target，IE瀏覽器用event.srcElement
target = e.target || e.srcElement,
n = 0;
if (target.className !== 'track') {
clearInterval(timer);
for (var i = 0, len = tracks.length; i < len; i++) {
tracks[i].setAttribute('class', '')
if (tracks[i] === target) {
n = i;
tracks[i].setAttribute('class', 'focus');
}
}
// 向右滑動
if (n - index >= 0) {
for (var i = 0; i < n - index; i++) {
setTimeout(next, 160 * i);
}
}
// 向左滑動
else {
for (var i = 0; i < index - n; i++) {
setTimeout(previous, 160 * i);
}
}
play();
}
})
init();
}
</script>
</body>
</html>
前言
這里是我按照自己的想法寫的一個原生javascript輪播圖，給初學者提供一個思路。寫輪播圖的方法有很多，這里只是其中一種，最重要的還是能學有所得，舉一反三。
效果
思路
大部分輪播圖都是通過banner左右移動的，這里用的是固定css布局，通過改變class來實現輪播的效果。
注意
本篇文章僅供學習使用，並未做瀏覽器兼容處理，建議使用谷歌或者第三方最新瀏覽器，對於IE這個神經病，不用也罷。
說明
這里簡要說明一些問題，其實代碼里大部分都注釋過了。
這里的css樣式部分，選擇器一定要加上
.banner，否則會有權重問題導致無法覆蓋上面的css樣式。
.banner .first_item{
z-index: 10;
transform: translateX(140px) scale(1);
}
.banner .second_item{
z-index: 1;
transform: translateX(540px) scale(0.8);
}
.banner .last_item{
z-index: 1;
transform: translateX(-250px) scale(0.8);
}
方法一的狀態點用的是flex布局做的自適應，也可以使用方法二，但是兼容性貌似還不如方法一，win10自帶的瀏覽器都不支持，索性就用了flex布局。
//方法一
.track{
display: flex;
justify-content: center;
overflow: hidden;
}
//方法二
.track{
width: fit-content;
margin: auto;
overflow: hidden;
}
這里注意要保留前兩個和最后一個div的class名（也就是
first_item、second_item、last_item），中間可以自適應隨意添加圖片，最少三張。有人可能會有疑惑，為什么不自動生成class名？這樣就可以隨意添加了，答案是：懶得寫了，如果自己感興趣，可以自己去改造。
<div class="first_item">
<a href="#"><img src="img/banner/banner1.jpg" alt=""></a>
</div>
<div class="second_item">
<a href="#"><img src="img/banner/banner2.jpg" alt=""></a>
</div>
<div class="">
<a href="#"><img src="img/banner/banner3.jpg" alt=""></a>
</div>
<div class="">
<a href="#"><img src="img/banner/banner4.jpg" alt=""></a>
</div>
<div class="last_item">
<a href="#"><img src="img/banner/banner5.jpg" alt=""></a>
</div>
track綁定點擊事件函數使用了事件委托，其中的這種切換方式我覺得是最和諧的，也可以用其他的方法。
//向右滑動
if(n-index >= 0){
for(var i = 0; i < n-index; i ++){
setTimeout(next, 160*i);
}
}
//向左滑動
else{
for(var i = 0; i < index-n; i ++){
setTimeout(previous, 160*i);
}
}
play();