目錄
前言
輪播圖的組成以及實作思想
左右按鈕的隱藏與顯示
核心思想
代碼實作
動態生成底部小圓圈
核心思想
代碼實作
右左按鈕實作
核心思想
代碼實作
實作自動播放
核心思想
代碼實作
整體代碼（復制可用）
總結
前言
常見的輪播圖有兩種：移動距離輪播圖和漸變切換輪播圖，但是輪播圖的代碼都是差不太多的，這里就是給大家講解的是漸變輪播圖的切換，下面有漸變輪播圖的效果展示圖，
輪播圖的組成以及實作思想
輪播圖的組成圖
左右按鈕的隱藏與顯示
核心思想
box（裝整個輪播圖的盒子）獲得焦點的時候按鈕style.display屬性改為block失去焦點none，
代碼實作
//獲取焦點顯示
box.addEventListener('mouseenter', function () {
right.style.display = 'block';
left.style.display = 'block';
});
//失去焦點隱藏
box.addEventListener('mouseleave', function () {
right.style.display = 'none';
left.style.display = 'none';
});動態生成底部小圓圈
核心思想
圖片的數量動態生成小圓圈的數量，實作靈活控制，根據ul里的li的長度得到小圓圈的數量，
代碼實作
for (var i = 0; i < ul_lis.length; i++) {
var li = document.createElement('li');
li.className = 'current';//current類是樣式
ol.appendChild(li);
//添加注冊事件 排他思想
li.addEventListener('click', function () {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = 'current';
}
this.className = 'current white';
var index = this.getAttribute('index');
num = index;
circle = index;
});
}
ol.children[0].className = 'current white';//默認第一個為白色底右左按鈕實作
核心思想
給ol添加一個index屬性，以便于獲取當前屬于第幾張圖片（ol 和 ul 里面的 li 數量是一致的），給左按鈕添加一個點擊事件，根據num（num由index賦值過來）跳轉下一張圖；設定flag（節流閥）保證是一次跳轉完成之后才可以實作下一次的跳轉，
代碼實作
//TRUE 深拷貝 復制內容且復制標簽
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
// 2.點擊右側按鈕一 次, 圖片往左播放一張, 以此類推, 左側按鈕同理，
right.addEventListener('click', function () {
if (flag) {
flag = false;
if (num == ul.children.length - 1) {
num = 0;
}
num++;
if (num == 4) { num = 0; }
for (var i = 0; i < ol.children.length; i++) {
ul_lis[i].style.opacity = '0';
}
ul_lis[num].style.opacity = '1';
flag = true;
//變數控制小圓圈的變化
circle++;
if (circle == ol.children.length) {
circle = 0;
}
circlechange();
}
});
left.addEventListener('click', function () {
if (flag) {
flag = false;
//實作無縫滾動
if (num == 0) {
num = ul.children.length - 1;
}
num--;
if (num == -1) { num = 4; }
for (var i = 0; i < ol.children.length; i++) {
ul_lis[i].style.opacity = '0';
}
ul_lis[num].style.opacity = '1';
flag = true;//一次只執行完畢才可以點擊下一次
//變數控制小圓圈的變化
circle--;
if (circle < 0) {
circle = ol.children.length - 1;
}
circlechange();
}
});
});
function circlechange() {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = 'current';
}
ol.children[circle].className = 'current white';
};
實作自動播放
核心思想
定時器實作，默認是顯示下一張右邊的圖，每隔一段時間，往右一下，滑鼠放在box上清除定時器，移開啟動定時器，
代碼實作
box.addEventListener('mouseenter', function () {
clearInterval(timer);
timer = null;
});
box.addEventListener('mouseleave', function () {
timer = setInterval(function () {
right.click();
}, 2000);
});
var timer = setInterval(function () {
right.click();
}, 2000);
整體代碼（復制可用）
<!DOCTYPE html>
<html lang="zn">
<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>
<script>
window.addEventListener('load', function () {
var box = document.querySelector('.box');
var right = box.querySelector('.right');
var left = box.querySelector('.left');
var ul = box.querySelector('ul');
var ul_lis = ul.querySelectorAll('li');
var ol = box.querySelector('ol');
var num = 0;
var circle = 0;
var flag = true;
// 1.滑鼠經過輪播圖模塊, 左右按鈕顯示, 離開隱藏左右按鈕，
box.addEventListener('mouseenter', function () {
right.style.display = 'block';
left.style.display = 'block';
clearInterval(timer);
timer = null;
});
box.addEventListener('mouseleave', function () {
right.style.display = 'none';
left.style.display = 'none';
timer = setInterval(function () {
right.click();
}, 2000);
});
var timer = setInterval(function () {
right.click();
}, 2000);
//2.動態生成小圓圈
for (var i = 0; i < ul_lis.length; i++) {
var li = document.createElement('li');
li.className = 'current';
li.setAttribute('index', i);
ol.appendChild(li);
//添加注冊事件 排他思想
li.addEventListener('click', function () {
for (var i = 0; i < ol.children.length; i++) {
ul_lis[i].style.opacity = '0';//排他思想：全部圖片設定為透明
ol.children[i].className = 'current';
}
this.className = 'current white';
var index = this.getAttribute('index');
ul_lis[index].style.opacity = '1';//留下需要顯示的圖片
num = index;
circle = index;
});
}
ol.children[0].className = 'current white';
//TRUE 深拷貝 復制內容且復制標簽
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
// 2.點擊右側按鈕一 次, 圖片往左播放一張, 以此類推, 左側按鈕同理，
right.addEventListener('click', function () {
if (flag) {
flag = false;
if (num == ul.children.length - 1) {
num = 0;
}
num++;
if (num == 4) { num = 0; }
for (var i = 0; i < ol.children.length; i++) {
ul_lis[i].style.opacity = '0';
}
ul_lis[num].style.opacity = '1';
flag = true;
//變數控制小圓圈的變化
circle++;
if (circle == ol.children.length) {
circle = 0;
}
circlechange();
}
});
function circlechange() {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = 'current';
}
ol.children[circle].className = 'current white';
};
left.addEventListener('click', function () {
if (flag) {
flag = false;
//實作無縫滾動
if (num == 0) {
num = ul.children.length - 1;
}
num--;
if (num == -1) { num = 4; }
for (var i = 0; i < ol.children.length; i++) {
ul_lis[i].style.opacity = '0';
}
ul_lis[num].style.opacity = '1';
flag = true;//一次只執行完畢才可以點擊下一次
//變數控制小圓圈的變化
circle--;
if (circle < 0) {
circle = ol.children.length - 1;
}
circlechange();
}
});
});
</script>
<style>
* {
margin: 0px;
padding: 0px;
list-style: none;
}
.box {
position: relative;
width: 810px;
height: 540px;
left: 50%;
transform: translateX(-50%);
}
img {
width: 810px;
height: 540px;
}
ul li {
position: absolute;
top: 0px;
left: 0px;
opacity: 0;
transition: 1s;
}
ul li:first-child {
opacity: 1;
}
ul {
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
span {
width: 20px;
height: 40px;
font-size: 25px;
line-height: 40px;
display: block;
position: absolute;
color: black;
background-color: #ccc;
opacity: .5;
text-align: center;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
display: none;
}
.right {
right: 0px;
}
.left {
left: 0px;
}
ol {
position: absolute;
left: 50%;
z-index: 999;
transform: translateX(-50%);
bottom: 5px;
}
.current {
float: left;
display: block;
width: 25px;
height: 5px;
background-color: rgb(41, 39, 39);
margin-right: 10px;
opacity: 0.5;
}
.white {
background-color: #fff;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<img src="../img/1.jpg" alt="">
</li>
<li>
<img src="../img/2.jpg" alt="">
</li>
<li>
<img src="../img/3.jpg" alt="">
</li>
<li>
<img src="../img/4.jpg" alt="">
</li>
</ul>
<span class="right"> > </span>
<span class="left"> < </span>
<ol>
</ol>
</div>
</body>
</html>總結
雖然現在很多時候輪播圖可以直接板塊套用，但是我們還是需要扎實的功底，畢竟學無止境！這里講解的是大概的一個思路以及實作，輪播的大概思想 就是這個樣子的，只是根據效果的不同需要稍微做一些修改啦~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/353433.html
標籤：其他