0
0

前端多张图片无缝无限循环滚动

想必大家都注意到<marquee>的不循环滚动。下面说一下循环滚动相对简单的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。
先了解一下对象的几个的属性：
innerHTML:设置或获取位于对象起始和结束标签内的 HTML
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

案例1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片滚动</title>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
<!--
.demo {
    background: #FFF;
    overflow:hidden;
    border: 1px dashed #CCC;
    width: 100%;
    min-width: 900px;
    height:274px;
}
.demo img {
    border: 3px solid #F2F2F2;
    height:274px;
}
.indemo {
    float: left;
    width: 600%;
}
.demo1 {
    float: left;
}
.demo2 {
    float: left;
}

.demoU {
    width:49%;
    background: #FFF;
    overflow:hidden;
    border: 1px dashed #CCC;
    height: 600px;
    text-align: center;
    float: left;
}
.demoU img, .demoD img{
    border: 3px solid #F2F2F2;
    display: block;
    width:100%;
}
.demoD {
    width:49%;
    background: #FFF;
    overflow:hidden;
    border: 1px dashed #CCC;
    height: 600px;
    text-align: center;
    float: right;
}
-->
</style>
<div id="demoL" class="demo">
    <div id="indemoL" class="indemo">
        <div id="demoL1" class="demo1">
            <a href="#"><img src="https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg" border="0" /></a>
            <a href="#"><img src="https://tenfei01.cfp.cn/creative/vcg/800/new/VCG211be3c9c31.jpg" border="0" /></a>
            <a href="#"><img src="https://tenfei01.cfp.cn/creative/vcg/800/new/VCG21gic5474154.jpg" border="0" /></a>
            <a href="#"><img src="https://alifei03.cfp.cn/creative/vcg/800/new/VCG2130b1b0044.jpg" border="0" /></a>
            <a href="#"><img src="https://alifei02.cfp.cn/creative/vcg/800/new/VCG41585832651.jpg" border="0" /></a>
            <a href="#"><img src="https://alifei02.cfp.cn/creative/vcg/800/new/VCG2118bb520c0.jpg" border="0" /></a>
        </div>
        <div id="demoL2" class="demo2"></div>
    </div>
</div>
<div id="demoR" class="demo">
    <div id="indemoR" class="indemo">
        <div id="demoR1" class="demo1">
            <a href="#"><img src="https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg" border="0" /></a>
            <a href="#"><img src="https://tenfei01.cfp.cn/creative/vcg/800/new/VCG211be3c9c31.jpg" border="0" /></a>
            <a href="#"><img src="https://tenfei01.cfp.cn/creative/vcg/800/new/VCG21gic5474154.jpg" border="0" /></a>
            <a href="#"><img src="https://alifei03.cfp.cn/creative/vcg/800/new/VCG2130b1b0044.jpg" border="0" /></a>
            <a href="#"><img src="https://alifei02.cfp.cn/creative/vcg/800/new/VCG41585832651.jpg" border="0" /></a>
            <a href="#"><img src="https://alifei02.cfp.cn/creative/vcg/800/new/VCG2118bb520c0.jpg" border="0" /></a>
        </div>
        <div id="demoR2" class="demo2"></div>
    </div>
</div>
<div id="demoU" class="demoU"> 
    <div id="demoU1" class="demoU1"> 
        <a href="#"><img src="https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg" border="0" /></a>
        <a href="#"><img src="https://tenfei01.cfp.cn/creative/vcg/800/new/VCG211be3c9c31.jpg" border="0" /></a>
        <a href="#"><img src="https://tenfei01.cfp.cn/creative/vcg/800/new/VCG21gic5474154.jpg" border="0" /></a>
        <a href="#"><img src="https://alifei03.cfp.cn/creative/vcg/800/new/VCG2130b1b0044.jpg" border="0" /></a>
        <a href="#"><img src="https://alifei02.cfp.cn/creative/vcg/800/new/VCG41585832651.jpg" border="0" /></a>
        <a href="#"><img src="https://alifei02.cfp.cn/creative/vcg/800/new/VCG2118bb520c0.jpg" border="0" /></a>
    </div> 
    <div id="demoU2" class="demoU1"></div> 
</div>
<div id="demoD" class="demoD"> 
    <div id="demoD1" class="demoD1"> 
        <a href="#"><img src="https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg" border="0" /></a>
        <a href="#"><img src="https://tenfei01.cfp.cn/creative/vcg/800/new/VCG211be3c9c31.jpg" border="0" /></a>
        <a href="#"><img src="https://tenfei01.cfp.cn/creative/vcg/800/new/VCG21gic5474154.jpg" border="0" /></a>
        <a href="#"><img src="https://alifei03.cfp.cn/creative/vcg/800/new/VCG2130b1b0044.jpg" border="0" /></a>
        <a href="#"><img src="https://alifei02.cfp.cn/creative/vcg/800/new/VCG41585832651.jpg" border="0" /></a>
        <a href="#"><img src="https://alifei02.cfp.cn/creative/vcg/800/new/VCG2118bb520c0.jpg" border="0" /></a>
    </div> 
    <div id="demoD2" class="demoD1"></div> 
</div>
<script>
var tabL=document.getElementById("demoL");
var tabL1=document.getElementById("demoL1");
var tabL2=document.getElementById("demoL2");
tabL2.innerHTML=tabL1.innerHTML;
var tabR=document.getElementById("demoR");
var tabR1=document.getElementById("demoR1");
var tabR2=document.getElementById("demoR2");
tabR2.innerHTML=tabR1.innerHTML;

/* 方法一，requestAnimationFrame省资源,不能调速度 */
var startState = 1;
/* 向左 */
/* function Marquee(){
    if(tab2.offsetWidth-tab.scrollLeft<=0)
        tab.scrollLeft-=tab1.offsetWidth;
    else{
        tab.scrollLeft++;
    }
    if(startState) requestAnimationFrame(Marquee);
} */
/* 向右 */
/* function Marquee(){ 
    if(tab.scrollLeft<=0) 
        tab.scrollLeft+=tab2.offsetWidth;
    else{ 
        tab.scrollLeft--;
    }
    if(startState) requestAnimationFrame(Marquee);
} */

/* Marquee();
tab.onmouseover=function() {startState=0};
tab.onmouseout=function() {startState=1;Marquee();}; */

/* 方法二，比较蚝资源,能调速度 */
var speed=1;//数字越大速度越慢 
/* 向左 */
function MarqueeL(){
    if(tabL2.offsetWidth-tabL.scrollLeft<=0)
        tabL.scrollLeft-=tabL1.offsetWidth;
    else{
        tabL.scrollLeft++;
    }
}
var MyMarL=setInterval(MarqueeL,speed);
tabL.onmouseover=function() {clearInterval(MyMarL);};
tabL.onmouseout=function() {MyMarL=setInterval(MarqueeL,speed);};
/* 向右 */
function MarqueeR(){
    if(tabR.scrollLeft<=0)
        tabR.scrollLeft+=tabR2.offsetWidth
    else{
        tabR.scrollLeft--
    }
}
var MyMarR=setInterval(MarqueeR,speed);
tabR.onmouseover=function() {clearInterval(MyMarR);};
tabR.onmouseout=function() {MyMarR=setInterval(MarqueeR,speed);};
/* 向上 */
var tabU=document.getElementById("demoU");
var tabU1=document.getElementById("demoU1");
var tabU2=document.getElementById("demoU2");
tabU2.innerHTML=tabU1.innerHTML; //克隆demoU1为demoU2 
function MarqueeU(){
    if(tabU2.offsetTop-tabU.scrollTop<=0)//当滚动至demoU1与demoU2交界时
        tabU.scrollTop-=tabU1.offsetHeight;//demo跳到最顶端
    else{
        tabU.scrollTop++;
    }
}
var MyMarU=setInterval(MarqueeU,speed);
tabU.onmouseover=function() {clearInterval(MyMarU)};//鼠标移上时清除定时器达到滚动停止的目的
tabU.onmouseout=function() {MyMarU=setInterval(MarqueeU,speed)};//鼠标移开时重设定时器
/* 向下 */
var tabD=document.getElementById("demoD");
var tabD1=document.getElementById("demoD1");
var tabD2=document.getElementById("demoD2");
tabD2.innerHTML=tabD1.innerHTML;//克隆demo1为demo2
tabD.scrollTop=tabD.scrollHeight
function MarqueeD(){
    if(tabD1.offsetTop-tabD.scrollTop>=0)//当滚动至demo1与demo2交界时
        tabD.scrollTop+=tabD2.offsetHeight;//demo跳到最顶端
    else{
        tabD.scrollTop--
    }
}
var MyMarD=setInterval(MarqueeD,speed);
tabD.onmouseover=function() {clearInterval(MyMarD)};//鼠标移上时清除定时器达到滚动停止的目的
tabD.onmouseout=function() {MyMarD=setInterval(MarqueeD,speed)};//鼠标移开时重设定时器

 

 

/* 单个方块移动案例 */
function animationTest(){
    let animationId;
    const button = document.createElement("button");
    button.innerHTML = "停止动画"
    button.style.position = 'absolute'
    button.style.top = '150px';
    button.style.left = '0px';
    button.style.zIndex = '999999'
    button.onclick = () => {
        if(!!animationId){
            window.cancelAnimationFrame(animationId);
            button.innerHTML = "开始动画"
            animationId = void 0;
        }else{
            move()
            button.innerHTML = "停止动画"
        }
    }

    const div = document.createElement("div");
    div.style.width = '100px'
    div.style.height = '100px'
    div.style.position = 'absolute'
    div.style.top = '0px';
    div.style.left = '0px';
    div.style.backgroundColor = '#f00'
    div.style.zIndex = '999999'
    document.getElementById("demo").appendChild(div);
    /* document.body.appendChild(div); */
    document.body.appendChild(button);
    
    let distance = 0;
    function move(){
        distance++
        console.log(distance) // 打印当前帧，方块移动的距离
        div.style.left = distance + 'px'
        animationId = requestAnimationFrame(move); // 通知浏览器开始绘制下一帧的时候,继续执行move函数
    }
    move();
}
/* animationTest(); */

</script>
</body>
</html>

案例2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
    *{ margin:0; padding:0;}
    body{margin:100px auto 0; width:400px;}
    #box{width:400px; height:100px; overflow:hidden; border:solid 2px #000; padding:2px;}
    ul{list-style:none;overflow:hidden;}
    li {width:100px;height:100px; float:left;}
    .bg1{background-color:#F00;}
    .bg2{background-color:#0F0;}
    .bg3{background-color:#00F;}
    .bg4{background-color:#FF0;}
    .bg5{background-color:#0FF;}
    .bg6{background-color:#F0F;}
</style>
<script type="text/javascript">
//无缝滚动代码开始（div#box,ul,li标签组合）
var myTime=15;//毫秒
function scrollPicBox(str){
    var box=document.getElementById(str);
    var obj=box.children||box.childNodes
    obj=obj.item(0);
    obj.innerHTML += obj.innerHTML;
    var cn=obj.children||obj.childNodes;
    var ww=0;
    for(i=0;i<cn.length;i++){
        cn.item(i).onmouseover=function(){
            var myTimeId=this.parentNode.parentNode.getAttribute("myTimeId");
            clearTimeout(myTimeId);
        }
        cn.item(i).onmouseout=function(){
            var o=this.parentNode.parentNode;
            myTimeId=setTimeout("scrollPicShow('"+o.getAttribute("id")+"')",myTime);
            o.setAttribute("myTimeId", myTimeId);
        }
        ww+=cn.item(i).scrollWidth;
    }
    obj.style.width=ww+"px";
    scrollPicShow(str);
}
function scrollPicShow(str){
    var o=document.getElementById(str);
    o.scrollLeft++;
    if(o.scrollLeft>=o.scrollWidth/2) o.scrollLeft=0;
    var myTimeId=setTimeout("scrollPicShow('"+str+"')",myTime);
    o.setAttribute("myTimeId", myTimeId);
}
window.onload=function(){
    scrollPicBox("box");
}
</script>
</head>

<body>
<div id="box">
<ul>
    <li class="bg1"></li>
    <li class="bg2"></li>
    <li class="bg3"></li>
    <li class="bg4"></li>
    <li class="bg5"></li>
    <li class="bg6"></li>
</ul>
</div>
</body>
</html>

备注:用CSS3动画animation实现无限循环的无缝滚动

用CSS3实现无限循环的无缝滚动-蚊子-前端博客 (xiabingbao.com)

css3 animate动画每循环一次的时间间隔设置方法_animation 设置动画执行间隔时间-CSDN博客

CSS3中的动画属性详解_css3中动画中各个属性值以及作用-CSDN博客

CSS3动画animation_animation: auto ease 0s 1 normal none running none-CSDN博客

标签： 前端
本文转载自: https://blog.csdn.net/cwr888/article/details/133276542
版权归原作者 cwr888 所有， 如有侵权，请联系我们删除。
登录后发布评论

“前端多张图片无缝无限循环滚动”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

机器人技术在安全领域的重要作用

安全学习记录——网络篇（一）

图腾柱PFC：HP1010为您的电动两轮车之旅提供绿色，高效，安全的动力

单元测试数据库回滚问题

这才是单元测试，之前我们都错了

【C语言基础】：字符函数和字符串函数

ChatGPT-Next-Web SSRF漏洞+XSS漏洞复现(CVE-2023-49785)

文章导航