基於JavaScript實現簡單的輪播圖
阿新 • • 發佈：2021-03-04
本文例項為大家分享了javascript實現簡單的輪播圖的具體程式碼，供大家參考，具體內容如下
js輪播圖實現思路
1、先獲取元素 盒子 左右按鈕
2、滑鼠經過 顯示/隱藏 左右側按鈕
3、動態生成小圓圈、 新增自定義屬性
4、小圓圈點選事件 新增current類名
5、新增動畫事件 animate 等於 -索引號*focusWidth
6、克隆第一張圖片到最後面
7、新增右側/左側按鈕點選事件
8、設定定時器 手動呼叫右側按鈕點選事件
html程式碼部分
<!DOCTYPE html> <html lang="en"> <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>Document</title>GJBGXjdZTB; <link rel="stylesheet" href="css/index.css" > <script src="js/index.js"></script> </head> <body> <div class="focus"> <a href="javascript:;" class="arrow_r">></a> <a href="javascript:;" class="arrow_l"> <</a> <ul> <li> <a href=""><img src="images/focus.jpg" alt="基於JavaScript實現簡單的輪播圖"></a> </li> <li> <a href=""><img src="images/focus1.jpg" alt="基於JavaScript實現簡單的輪播圖"></a> </li> <li> <a href=""><img src="images/focus2.jpg" alt="基於JavaScript實現簡單的輪播圖"></a> </li> <li> <a href=""><img src="images/focus3.jpg" alt="基於JavaScript實現簡單的輪播圖"></a> </li> </ul> <ol class="circle"> </ol> </div> </body> </html>
css樣式部分
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
img {
border: 0;
vertical-align: top;
}
a {
text-decoration: none;
}
.focus {
position: relative;
width: 721px;
height: 455px;
margin: 100px auto;
overflow: hidden;
}
.focus ul {
position: absolute;
top: 0;
left: 0;
width: 600%;
}
.focus ul li {
float: left;
}
.arrow_r,.arrow_l {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 24px;
background: rgba(0,.2);
color: #fff;
z-index: 1;
}
.arrow_r {
right: 0;
}
.circle {
position: absolute;
bottom: 10px;
left: 50px;
}
.circle li {
float: left;
width: 8px;
height: 8px;
border: 2px solid rgba(255,255,.5);
border-radius: 50%;
margin: 0 3px;
cursor: pointer;
}
.current {
background-color: #fff;
}javascript部分
window.addEventListener('load',function() {
//獲取元素
var focus = document.querySelector('.focus');
var arrow_r = document.querySelector('.arrow_r');
var arrow_l = document.querySelector('.arrow_l');
var focusWidth = focus.offsetWidth;
// 滑鼠經過focus盒子 顯示/隱藏 左右側按鈕 暫停輪播
focus.addEventListener('mouseenter',function() {
arrow_r.style.www.cppcns.comdisplay = 'block';
arrow_l.style.display = 'block';
clearInterval(timer);
timer = null;
});
focus.addEventListener('mouseleaveGJBGXjdZTB',function() {
arrow_r.style.display = 'none';
arrow_l.style.display = 'none';
timer = setInterval(function() {
//呼叫點選事件
arrow_r.click();
},2000);
});
//動態生成小圓圈
var ul = focus.querySelector('ul');
var ol = focus.querySelector('.circle');
for (var i = 0; i < ul.children.length; i++) {
var li = document.createElemehttp://www.cppcns.comnt('li');
li.setAttribute('index',i);
ol.appendChild(li);
//小圓圈點選事件
li.addEventListener('click',function() {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
var index = this.getAttribute('index');
num = index;
circle = index;
this.className = 'current';
animate(ul,-index * focusWidth);
})
}
ol.children[0].className = 'current';
//克隆第一張圖片放到最後一張
var fis = ul.children[0].cloneNode(true);
ul.appendChild(fis);
//右側按鈕點選事件
var num = 0;
var circle = 0;
arrow_r.addEventListener('click',function() {
if (num === ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul,-num * focusWidth);
circle++;
if (circle === ul.children.length - 1) {
circle = 0;
}
for (var i = 0; i < ol.children.length; i++) {
www.cppcns.com ol.children[i].className = '';
}
ol.children[circle].className = 'current';
});
//左側按鈕點選事件
arrow_l.addEventListener('click',function() {
if (num == 0) {
num = ul.children.length - 1;
ul.style.left = -num * focusWidth + 'px';
}
num--;
animate(ul,-num * focusWidth);
circle--;
circle = circle < 0 ? ol.children.length - 1 : circle;
// 呼叫函式
circleChange();
});
//清除其餘小圓圈的current類名
function circleChange() {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
// 留下當前的小圓圈的current類名
ol.children[circle].className = 'current';
}
//動畫函式
function animate(obj,target,callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
callback && callback();
}
obj.style.left = obj.offsetLeft + step + 'px';
},15);
}
//自動輪播放輪播圖
var timer = setInterval(function() {
//呼叫點選事件
arrow_r.click();
},2000);
});
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。