原生js實現無縫輪播圖效果
原生js實現輪播圖效果(無縫滾動) ，供大傢參考，具體內容如下
效果圖：
代碼：
<!DOCTYPE html>
<html lang="en">
<!-- day07 7-10-14 -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./images1/20.animate.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.focus {
/*overflow: hidden;*/
position: absolute;
top: 100px;
left: 200px;
width: 721px;
height: 455px;
background-color: brown;
}
.prev,
.next {
display: none;
position: absolute;
top: 50%;
margin-top: -15px;
width: 20px;
height: 30px;
background-color: rgba(0, 0, 0, .3);
text-decoration: none;
color: #fff;
line-height: 30px;
text-align: center;
font-size: 16px;
z-index: 2;
}
.focus ul {
/* 引入動畫js文件要求必須有定位 */
position: absolute;
width: 600%;
}
.focus ul li {
float: left;
}
.prev {
left: 0;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.next {
right: 0;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.promo-nav {
position: absolute;
bottom: 10px;
left: 60px;
width: 200px;
height: 18px;
border-radius: 9px;
}
.promo-nav li {
float: left;
width: 10px;
height: 10px;
background-color: #fff;
margin: 2px;
border-radius: 50%;
}
.promo-nav .current {
background-color: orange;
}
.focus ul li a img {
width: 721px;
height: 455px;
}
</style>
</head>
<body>
<div class="focus">
<ul>
<li>
<a href="#" ><img src="images1/focu01.jpg" alt=""></a>
</li>
<li>
<a href="#" ><img src="images1/focu02.jpg" alt=""></a>
</li>
<li>
<a href="#" ><img src="images1/focu03.jpg" alt=""></a>
</li>
<li>
<a href="#" ><img src="images1/focu04.jpg" alt=""></a>
</li>
</ul>
<!-- 左側按鈕 -->
<a href="javascript:;" class="prev"><</a>
<!-- 右側按鈕 -->
<a href="javascript:;" class="next">></a>
<ol class="promo-nav">
</ol>
</div>
<script>
window.addEventListener('load', function() {
var focus = document.querySelector('.focus');
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');
var focusWidth = focus.offsetWidth;
//鼠標經過
focus.addEventListener('mouseenter', function() {
prev.style.display = 'block';
next.style.display = 'block';
clearInterval(timer);
timer = null; //清除定時器變量
})
//鼠標離開
focus.addEventListener('mouseleave', function() {
prev.style.display = 'none';
next.style.display = 'none';
timer = setInterval(function() {
next.click();
}, 2000)
})
//3.動態生成小圓圈 有幾張圖片 就生成幾個小圓圈
var ul = focus.querySelector('ul');
var ol = focus.querySelector('.promo-nav');
// console.log(ul.children.length); 4
for (var i = 0; i < ul.children.length; i++) {
//創建一個li
var li = document.createElement('li');
//記錄當前小圓圈的索引號 通過自定義屬性來做
li.setAttribute('index', i);
//插入到ol後面
ol.appendChild(li);
//4.鼠標點擊小圓圈小圓圈變色(給小圓圈添加current類其餘小圓圈移除這個類)(排他思想)
//在生成小圓圈的同時直接綁定點擊事件
li.addEventListener('click', function() {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
this.className = 'current';
//5.點擊小圓點 移動圖片 移動的是ul
//ul移動的距離 小圓圈的索引號乘以圖片寬度 註意是負值
//當我們點擊瞭某個小li就得到瞭當前小li的索引號
var index = this.getAttribute('index');
//當我們點擊瞭某個li就把li的索引號給num
num = index;
//當我們點擊瞭某個li就把li的索引號給index
circle = index;
console.log(index);
animate(ul, -index * focusWidth, );
})
}
//把ol裡面的第一個li北京顏色設置成白色
ol.children[0].className = 'current';
//6. 克隆第一張li放到ul後面
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
//7.點擊右側按鈕圖片滾動一張
var num = 0;
var circle = 0;
var flag = true;
//右側按鈕
next.addEventListener('click', function() {
if (flag) {
flag = false; //先關閉節流閥
//5.如果走到最後一張復制圖片此時ul快速復原 left改為0(無縫滾動)
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, -num * focusWidth, function() {
flag = true;
});
//8.點擊右側按鈕小圓圈跟隨一起變化 聲明一個變量控制小圓圈變化
circle++;
//如果 circle等於4說明做到最後克隆的這張圖片瞭 我們就復原
if (circle == ol.children.length) {
circle = 0;
}
// //清除其餘小圓圈類名
// for (var i = 0; i < ol.children.length; i++) {
// ol.children[i].className = '';
// }
// //留下當前小圓圈current類名
// ol.children[circle].className = 'current';
circleChange();
}
})
//左側按鈕
prev.addEventListener('click', function() {
if (flag) {
flag = false;
//5.如果走到最後一張復制圖片此時ul快速復原 left改為0(無縫滾動)
if (num == 0) {
num = ul.children.length - 1;
ul.style.left = -num * focusWidth + 'px';
}
num--;
animate(ul, -num * focusWidth, function() {
flag = true;
});
//8.點擊右側按鈕小圓圈跟隨一起變化 聲明一個變量控制小圓圈變化
circle--;
//如果 circle小於0小圓圈要改為第四個小圓圈
if (circle < 0) {
circle = ol.children.length - 1;
}
// 清除其餘小圓圈類名
// for (var i = 0; i < ol.children.length; i++) {
// ol.children[i].className = '';
// }
// 留下當前小圓圈current類名
// ol.children[circle].className = 'current';
circleChange();
}
})
function circleChange() {
//清除其餘小圓圈類名
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
//留下當前小圓圈current類名
ol.children[circle].className = 'current';
}
//10.自動播放輪播圖
var timer = setInterval(function() {
next.click();
}, 2000)
})
</script>
</body>
</html>
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。