重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
requestAnimationFrame实现单张图片无缝持续滚动
背景
在很久以前，有写过一个使用 js 实现单张图片持续滚动图片的 代码，但那一版实现会持续操作DOM，向DOM中插入元素，性能较差，最近发现requestAnimationFrame 通过 动画的方式实现图片滚动更加方便，遂重新实现了一版，效果更赞，性能更好。
竹山ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18980820575（备注：SSL证书合作）期待与您的合作！
效果如下
需求描述
需要单张图片在可视区域内无缝持续向上滚动或向左滚动，由于向下和向右属于反着坐标轴移动图片，和正常DOM元素插入展示顺序也相反，遂不考虑此种场景。
代码实现
DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<title>滚动图片title>
<style>
/*竖向滚动*/
#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;
}
/*横向滚动*/
/* #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";
// 功能：实现图片无缝向上滚动
// run：运行图片轮播
// pause：暂停图片轮播
// imgWrap：图片容器，放置多张图片,整体进行滚动
// imgView： 图片所展示区域的窗口view
// step 每次移动的距离
// direction： 滚动方向，默认 "top" 持续向上滚动，可选值为 "top" 和 "left"
function imageScroll(imgWrap, imgView, step= 1, direction= "top") {
if (!imgWrap|| !imgView) {
console.warn("请传入参数形如[图片包裹容器，图片展示容器]");
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);
// 初始化移动距离
let distance= 0;
// 定义 transform 值名称
let transformV;
// 初始化图片移动置为0的边界长度
let boundaryValue= 0;
switch (direction) {
case "left":
// 向左滚动，值为 translateX
transformV= "translateX";
// 置为 0 的边界值为图片宽度
boundaryValue= parseFloat(imgWidth);
// 克隆的图片个数，至少克隆一张
const num1= Math.ceil(containerWidth/ imgWidth)|| 1;
for (let index= 0; index< num1; index++) {
// 克隆一张图片并插入到图片最后面
imgWrap.appendChild(imgWrap.querySelector("img").cloneNode(true));
}
break;
default:
// 向上滚动，值为 translateY
transformV= "translateY";
// 置为 0 的边界值为图片高度
boundaryValue= parseFloat(imgHeight);
// 克隆的图片个数，至少克隆一张
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;
}
// 执行动画函数
const requestAnimationFrame=
window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame;
// 取消执行动画函数
const cancelAnimationFrame=
window.cancelAnimationFrame||
window.webkitCancelAnimationFrame||
window.mozCancelAnimationFrame;
// 初始化定义轮播函数
requestId= null;
return function () {
return {
run: ()=> {
// 定义滚动动画回调函数
const scroll= ()=> {
// 移动的距离=已经移动的距离+每步的长度
distance= distance+ step;
// 设置图片容器的 transform
imgWrap.style.transform= `${transformV}(-${distance}px)`;
// 关键行：当移动距离大于边界值时，重置 distance=0
if (distance>= boundaryValue) {
distance= 0;
}
// 再次调用滚动动画
requestId= requestAnimationFrame(scroll);
};
// 执行滚动动画，传入滚动动画回调函数
requestId= requestAnimationFrame(scroll);
},
// 暂停动画
pause: ()=> {
cancelAnimationFrame(requestId);
},
};
};
}
window.onload= ()=> {
// 向上滚动
const scroll= imageScroll(
document.getElementById("wrap"),
document.getElementById("container"),
1,
"top"
);
// 向左滚动
// const scroll = imageScroll(
// document.getElementById("wrap"),
// document.getElementById("container"),
// 0.5,
// "left"
// );
scroll().run();
// 通过定时器可以实现图片滚动几秒后暂停,如下表示先滚动 4s 后暂停，之后每个隔 2s 再滚动，2秒后再暂停
// setInterval(() => {
// scroll().pause();
// setTimeout(() => {
// scroll().run();
// }, 2000);
// }, 4000);
};
script>
body>
html>
网页标题：requestAnimationFrame实现单张图片无缝持续滚动
本文URL：http://cqcxhl.cn/article/dsojhii.html