在很久以前，有寫過一個(gè)使用 js 實(shí)現(xiàn)單張圖片持續(xù)滾動(dòng)圖片的 代碼，但那一版實(shí)現(xiàn)會(huì)持續(xù)操作DOM，向DOM中插入元素，性能較差，最近發(fā)現(xiàn)requestAnimationFrame 通過 動(dòng)畫的方式實(shí)現(xiàn)圖片滾動(dòng)更加方便，遂重新實(shí)現(xiàn)了一版，效果更贊，性能更好。
竹山ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！
需要單張圖片在可視區(qū)域內(nèi)無縫持續(xù)向上滾動(dòng)或向左滾動(dòng)，由于向下和向右屬于反著坐標(biāo)軸移動(dòng)圖片，和正常DOM元素插入展示順序也相反，遂不考慮此種場(chǎng)景。
重慶分公司
重慶分公司
DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<title>滾動(dòng)圖片title>
<style>
/*豎向滾動(dòng)*/
#container{
width: 300px;
height: 150px;
overflow: hidden;
margin: 100px;
}
#wrap{
width: 100%;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
transform: translatez(0);
}
img{
width: 100%;
height: auto;
}
/*橫向滾動(dòng)*/
/* #container {
width: 300px;
height: 150px;
overflow: hidden;
margin: 100px;
}
#wrap {
width: auto;
height: 100%;
display: flex;
flex-wrap: nowrap;
align-items: center;
transform: translatez(0);
}
img {
width: auto;
height: 100%;
}*/
style>
head>
<body>
<divid="container">
<divid="wrap">
<img
src="https://img0.baidu.com/it/u=,&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=752"
alt=""
/>
div>
div>
<script>
"use strict";
// 功能：實(shí)現(xiàn)圖片無縫向上滾動(dòng)
// run：運(yùn)行圖片輪播
// pause：暫停圖片輪播
// imgWrap：圖片容器，放置多張圖片,整體進(jìn)行滾動(dòng)
// imgView： 圖片所展示區(qū)域的窗口view
// step 每次移動(dòng)的距離
// direction： 滾動(dòng)方向，默認(rèn) "top" 持續(xù)向上滾動(dòng)，可選值為 "top" 和 "left"
function imageScroll(imgWrap, imgView, step= 1, direction= "top") {
if (!imgWrap|| !imgView) {
console.warn("請(qǐng)傳入?yún)?shù)形如[圖片包裹容器，圖片展示容器]");
return false;
}
// 獲取窗口寬度
const containerWidth= parseInt(imgView.clientWidth);
// 獲取窗口高度
const containerHeight= parseInt(imgView.clientHeight);
// 獲取圖片元素
const imgElem= imgWrap.querySelector("img");
// 獲取圖片寬度
const imgWidth= parseInt(imgElem.width);
// 獲取圖片高度
const imgHeight= parseInt(imgElem.height);
// 初始化移動(dòng)距離
let distance= 0;
// 定義 transform 值名稱
let transformV;
// 初始化圖片移動(dòng)置為0的邊界長(zhǎng)度
let boundaryValue= 0;
switch (direction) {
case "left":
// 向左滾動(dòng)，值為 translateX
transformV= "translateX";
// 置為 0 的邊界值為圖片寬度
boundaryValue= parseFloat(imgWidth);
// 克隆的圖片個(gè)數(shù)，至少克隆一張
const num1= Math.ceil(containerWidth/ imgWidth)|| 1;
for (let index= 0; index< num1; index++) {
// 克隆一張圖片并插入到圖片最后面
imgWrap.appendChild(imgWrap.querySelector("img").cloneNode(true));
}
break;
default:
// 向上滾動(dòng)，值為 translateY
transformV= "translateY";
// 置為 0 的邊界值為圖片高度
boundaryValue= parseFloat(imgHeight);
// 克隆的圖片個(gè)數(shù)，至少克隆一張
const num2= Math.ceil(containerHeight/ imgHeight)|| 1;
for (let index= 0; index< num2; index++) {
// 克隆一張圖片并插入到圖片最后面
imgWrap.appendChild(imgWrap.querySelector("img").cloneNode(true));
}
break;
}
if (
/iP(ad|hone|od).*OS 13/.test(window.navigator.userAgent)|| // iOS6 is buggy
!window.requestAnimationFrame||
!window.cancelAnimationFrame
) {
let lastTime= 0;
window.requestAnimationFrame= function (callback) {
const now= Date.now();
const nextTime= Math.max(lastTime+ 16, now);
return setTimeout(function () {
callback((lastTime= nextTime));
}, nextTime- now);
};
window.cancelAnimationFrame= clearTimeout;
}
// 執(zhí)行動(dòng)畫函數(shù)
const requestAnimationFrame=
window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame;
// 取消執(zhí)行動(dòng)畫函數(shù)
const cancelAnimationFrame=
window.cancelAnimationFrame||
window.webkitCancelAnimationFrame||
window.mozCancelAnimationFrame;
// 初始化定義輪播函數(shù)
requestId= null;
return function () {
return {
run: ()=> {
// 定義滾動(dòng)動(dòng)畫回調(diào)函數(shù)
const scroll= ()=> {
// 移動(dòng)的距離=已經(jīng)移動(dòng)的距離+每步的長(zhǎng)度
distance= distance+ step;
// 設(shè)置圖片容器的 transform
imgWrap.style.transform= `${transformV}(-${distance}px)`;
// 關(guān)鍵行：當(dāng)移動(dòng)距離大于邊界值時(shí)，重置 distance=0
if (distance>= boundaryValue) {
distance= 0;
}
// 再次調(diào)用滾動(dòng)動(dòng)畫
requestId= requestAnimationFrame(scroll);
};
// 執(zhí)行滾動(dòng)動(dòng)畫，傳入滾動(dòng)動(dòng)畫回調(diào)函數(shù)
requestId= requestAnimationFrame(scroll);
},
// 暫停動(dòng)畫
pause: ()=> {
cancelAnimationFrame(requestId);
},
};
};
}
window.onload= ()=> {
// 向上滾動(dòng)
const scroll= imageScroll(
document.getElementById("wrap"),
document.getElementById("container"),
1,
"top"
);
// 向左滾動(dòng)
// const scroll = imageScroll(
// document.getElementById("wrap"),
// document.getElementById("container"),
// 0.5,
// "left"
// );
scroll().run();
// 通過定時(shí)器可以實(shí)現(xiàn)圖片滾動(dòng)幾秒后暫停,如下表示先滾動(dòng) 4s 后暫停，之后每個(gè)隔 2s 再滾動(dòng)，2秒后再暫停
// setInterval(() => {
// scroll().pause();
// setTimeout(() => {
// scroll().run();
// }, 2000);
// }, 4000);
};
script>
body>
html>
