如何使用JavaScript實現無縫滾動自動播放輪播圖效果
阿新 • • 發佈：2020-08-21
在一些專案開發中，我們經常需要使用到輪播圖，但是沒有深入學習的情況下做輪播圖是非常困難的。
思路
分成小問題來解決
1. 動態生成序號12345
頁面有多少li（圖片），就有多少序號
2. 點選序號、顯示高亮、切換圖片
2.1 給序號註冊onclick事件
2.2 取消其他序號高亮顯示，讓當前點選的序號高亮顯示
2.3 點選序號，動畫的方式切換到當前點選的圖片位置（設定自定義屬性，記錄當前索引，有了索引就可用動畫進行移動）
3. 滑鼠放到盒子上的時候顯示左右箭頭，移開時候隱藏
onmouseenter和onmouseleave
4. 實現左右箭頭播放上一張下一張（無縫滾動）
5. 隔多少時間自動播放
setInterval 和 element1..click() 聯合即可實現
程式碼： index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
body {
margin: 0;
background-color: rgb(55,190,89);
}
.all {
width: 500px;
height: 200px;
padding: 4px;
margin: 100px auto;
position: relative;
background-color: #fff;
border-radius: 20px;
}
.screen {
width: 500px;
height: 200px;
border-radius: 17px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 3000px;
}
.all ol {
position: absolute;
right: 180px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border-radius: 10px;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
opacity: 0.5;
/* 透明度 */
}
.all ol li.current {
opacity: 1.0;
}
#arr {
display: none;
z-index: 1000;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑體';
font-size: 30px;
color: #fff;
opacity: 0.5;
border: 1px solid #fff;
border-radius: 5px;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id='box'>
<div class="screen">
<ul>
<li><img src="images/wf1.jpg" width="500" height="200" /></li>
<li><img src="images/wf2.jpg" width="500" height="200" /></li>
<li><img src="images/wf3.jpg" width="500" height="200" /></li>
<li><img src="images/wf4.jpg" width="500" height="200" /></li>
<li><img src="images/wf5.jpg" width="500" height="200" /></li>
</ul>
<ol>
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script src="common.js"></script>
<script src="animate.js"></script>
<script src="index.js"></script>
</body>
</html>index.js
//獲取元素
var box = my$('box');
var screen = box.children[0];
var ul = screen.children[0];
var ol = screen.children[1]
//獲取箭頭
var arr = my$('arr');
var arrLeft = my$('left');
var arrRight = my$('right');
var count = ul.children.length; /* 獲取圖片數量 還沒有放cloneLi，所以數值是5*/
var imgWidth = screen.offsetWidth; /* 獲取的圖片（盒子）的寬高 */
//1.動態生成序號
for (i = 0; i < count; i++) {
// 在ol內建立li
var li = document.createElement('li');
ol.appendChild(li);
// li內賦予數值
setInnerText(li,i + 1);
li.onclick = liClick;
// 設定標籤的自定義屬性（建立索引）
li.setAttribute('index',i);
}
// 2.點選序號，切換，顯示高亮
function liClick() {
// 取消其他的li的高亮，顯示當前li高亮
for (i = 0; i < ol.children.length; i++) {
var li = ol.children[i];
li.className = '';
this.className = 'current';
}
// 獲取的自定義屬性是字串型別，要轉成整數
var liIndex = parseInt(this.getAttribute('index'));
animate(ul,-liIndex * imgWidth);
//使得後面定義的全域性變數index等於li的屬性liIndex
index = liIndex;
}
//ol內的第一個li顯示高亮色
ol.children[0].className = 'current';
//3.滑鼠放上去的時候顯示箭頭
// onmouseover和onmouseout會觸發事件冒泡；onmouseleave和onmouseenter不會觸發事件冒泡
box.onmouseenter = function () {
arr.style.display = 'block';
clearInterval(timeId);
}
box.onmouseleave = function () {
arr.style.display = 'none';
timeId = setInterval(function () {
arrRight.click();
},2500)
}
// 4.實現上一張，下一張的功能
var index = 0; //第一張圖片的索引
arrRight.onclick = function () {
// 判斷是否是克隆的第一張圖片，如果是克隆的第一張圖片，此時修改ul的座標，顯示真正的第一張圖片
if (index === count) {
ul.style.left = '0px';
index = 0;
}
// 如果是最後一張圖片，不讓index++
index++;
// 有5張圖片，但是還有一張克隆的圖片，克隆圖片索引是5
if (index < count) {
//獲取圖片對應的序號，讓序號進行點選
ol.children[index].click();
} else {
animate(ul,-index * imgWidth);
// 取消所有的高亮現實，讓第一個序號高亮顯示
for (var i = 0; i < ol.children.length; i++) {
var li = ol.children[i];
li.className = '';
}
ol.children[0].className = 'current';
}
//
}
arrLeft.onclick = function () {
if (index === 0) {
index = count;
ul.style.left = -index * imgWidth + 'px';
}
index--;
ol.children[index].click();
}
// 無縫滾動
var firstLi = ul.children[0];
// 克隆li
//cloneNode() 複製節點：引數 true 複製節點中的內容 ;false 只複製當前節點，不復制裡面的內容
var cloneLi = firstLi.cloneNode(true);
ul.appendChild(cloneLi)
// 5.自動播放
var timeId = setInterval(function () {
// 切換到下一張圖片
arrRight.click();
},2500)common.js
function my$(id) {
return document.getElementById(id);
}
// 處理瀏覽器相容性
// 獲取第一個子元素
function getFirstElementChild(element) {
var node,nodes = element.childNodes,i = 0;
while (node = nodes[i++]) {
if (node.nodeType === 1) {
return node;
}
}
return null;
}
// 處理瀏覽器相容性
// 獲取下一個兄弟元素
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
// 處理innerText和textContent的相容性問題
// 設定標籤之間的內容
function setInnerText(element,content) {
// 判斷當前瀏覽器是否支援 innerText
if (typeof element.innerText === 'string') {
element.innerText = content;
} else {
element.textContent = content;
}
}
// 處理註冊事件的相容性問題
// eventName,不帶on， click mouseover mouseout
function addEventListener(element,eventName,fn) {
// 判斷當前瀏覽器是否支援addEventListener 方法
if (element.addEventListener) {
element.addEventListener(eventName,fn); // 第三個引數 預設是false
} else if (element.attachEvent) {
element.attachEvent('on' + eventName,fn);
} else {
// 相當於 element.onclick = fn;
element['on' + eventName] = fn;
}
}
// 處理移除事件的相容性處理
function removeEventListener(element,fn) {
if (element.removeEventListener) {
element.removeEventListener(eventName,fn);
} else if (element.detachEvent) {
element.detachEvent('on' + eventName,fn);
} else {
element['on' + eventName] = null;
}
}
// 獲取頁面滾動距離的瀏覽器相容性問題
// 獲取頁面滾動出去的距離
function getScroll() {
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
return {
scrollLeft: scrollLeft,scrollTop: scrollTop
}
}
// 獲取滑鼠在頁面的位置，處理瀏覽器相容性
function getPage(e) {
var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
var pageY = e.pageY || e.clientY + getScroll().scrollTop;
return {
pageX: pageX,pageY: pageY
}
}
//格式化日期物件，返回yyyy-MM-dd HH:mm:ss的形式
function formatDate(date) {
// 判斷引數date是否是日期物件
// instanceof instance 例項(物件) of 的
// console.log(date instanceof Date);
if (!(date instanceof Date)) {
console.error('date不是日期物件')
return;
}
var year = date.getFullYear(),month = date.getMonth() + 1,day = date.getDate(),hour = date.getHours(),minute = date.getMinutes(),second = date.getSeconds();
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
hour = hour < 10 ? '0' + hour : hour;
minute = minute < 10 ? '0' + minute : minute;
second = second < 10 ? '0' + second : second;
return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
}
// 獲取兩個日期的時間差
function getInterval(start,end) {
// 兩個日期物件，相差的毫秒數
var interval = end - start;
// 求 相差的天數/小時數/分鐘數/秒數
var day,hour,minute,second;
// 兩個日期物件，相差的秒數
// interval = interval / 1000;
interval /= 1000;
day = Math.round(interval / 60 / 60 / 24);
hour = Math.round(interval / 60 / 60 % 24);
minute = Math.round(interval / 60 % 60);
second = Math.round(interval % 60);
return {
day: day,hour: hour,minute: minute,second: second
}
}
animage.js
// var timerId = null;
// 封裝動畫的函式
function animate(element,target) {
// 通過判斷，保證頁面上只有一個定時器在執行動畫
if (element.timerId) {
clearInterval(element.timerId);
element.timerId = null;
}
element.timerId = setInterval(function () {
// 步進 每次移動的距離
var step = 10;
// 盒子當前的位置
var current = element.offsetLeft;
// 當從400 到 800 執行動畫
// 當從800 到 400 不執行動畫
// 判斷如果當前位置 > 目標位置 此時的step 要小於0
if (current > target) {
step = - Math.abs(step);
}
// Math.abs(current - target) <= Math.abs(step)
if (Math.abs(current - target) <= Math.abs(step)) {
// 讓定時器停止
clearInterval(element.timerId);
// 讓盒子到target的位置
element.style.left = target + 'px';
return;
}
// 移動盒子
current += step;
element.style.left = current + 'px';
},5);
}
總結
到此這篇關於如何使用JavaScript實現無縫滾動自動播放輪播圖效果的文章就介紹到這了,更多相關js無縫滾動自動播放內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！