css一张图无限循环滚动,纯css实现单张图片无限循环无缝滚动，

functionaddKeyFrames(height,offsetHeight){

let style= document.createElement('style');

style.type= 'text/css';

let keyFrames= '\

@-webkit-keyframes scrollUpAndPause {\

0% {\

-webkit-transform: translateY(0);\

transform: translateY(0);\

}\

40% {\

-webkit-transform: translateY(0);\

transform: translateY(A_DYNAMIC_VALUE);\

}\

100% {\

-webkit-transform: translateY(0);\

transform: translateY(A_DYNAMIC_VALUE);\

}\

}\

@-moz-keyframes scrollUpAndPause {\

0% {\

-webkit-transform: translateY(0);\

transform: translateY(0);\

}\

40% {\

-webkit-transform: translateY(0);\

transform: translateY(A_DYNAMIC_VALUE);\

}\

100% {\

-webkit-transform: translateY(0);\

transform: translateY(A_DYNAMIC_VALUE);\

}\

}\

@-o-keyframes scrollUpAndPause {\

0% {\

-webkit-transform: translateY(0);\

transform: translateY(0);\

}\

40% {\

-webkit-transform: translateY(0);\

transform: translateY(A_DYNAMIC_VALUE);\

}\

100% {\

-webkit-transform: translateY(0);\

transform: translateY(A_DYNAMIC_VALUE);\

}\

}\

@keyframes scrollUpAndPause {\

0% {\

-webkit-transform: translateY(0);\

transform: translateY(0);\

}\

40% {\

-webkit-transform: translateY(0);\

transform: translateY(A_DYNAMIC_VALUE);\

}\

100% {\

-webkit-transform: translateY(0);\

transform: translateY(A_DYNAMIC_VALUE);\

}\

}\

@-webkit-keyframes scrollUp {\

0% {\

-webkit-transform: translateY(0);\

transform: translateY(0);\

}\

100% {\

-webkit-transform: translateY(0);\

transform: translateY(B_DYNAMIC_VALUE);\

}\

}\

@-moz-keyframes scrollUp {\

0% {\

-webkit-transform: translateY(0);\

transform: translateY(0);\

}\

100% {\

-webkit-transform: translateY(0);\

transform: translateY(B_DYNAMIC_VALUE);\

}\

}\

@-o-keyframes scrollUp {\

0% {\

-webkit-transform: translateY(0);\

transform: translateY(0);\

}\

100% {\

-webkit-transform: translateY(0);\

transform: translateY(B_DYNAMIC_VALUE);\

}\

}\

@keyframes scrollUp {\

0% {\

-webkit-transform: translateY(0);\

transform: translateY(0);\

}\

100% {\

-webkit-transform: translateY(0);\

transform: translateY(B_DYNAMIC_VALUE);\

}\

}';

keyFrames= keyFrames.replace(/A_DYNAMIC_VALUE/g, '-'+(height-(offsetHeight-height)/2)+'px');

keyFrames = keyFrames.replace(/B_DYNAMIC_VALUE/g, '-'+height+'px');

style.innerHTML=keyFrames;

document.getElementsByTagName('head')[0].appendChild(style);

}//初始化图片滚动动画高度

functioninitAnimate() {

const adLeftHeight= document.getElementById("adLeft").offsetHeight; //左侧区域高度

const adLeftWidth = document.getElementById("adLeft").offsetWidth; //左侧区域宽度

let leftImage = newImage();

let leftImageWidth= "";

let leftImageHeight= "";

leftImage.src=window.campaign.image_url;

leftImage.οnlοad= function() {

leftImageWidth=leftImage.width;

leftImageHeight=leftImage.height;

let imageRealHeight= adLeftWidth * (leftImageHeight /leftImageWidth);//const imageBoxScrollHeight = document.getElementById("imageBox").scrollHeight; // 三张图片的总高度

//const imageHeight = imageBoxScrollHeight/3;// 单张图片高度

addKeyFrames(imageRealHeight,adLeftHeight);

}

}