纯javascript实现文字、图片无限滚动效果_js图片加文字滚动效果-CSDN博客

本文链接：https://blog.csdn.net/zyx13859002783/article/details/38849229

本文介绍如何使用纯JavaScript实现文字和图片的无限无缝滚动效果。通过xMarquee函数，可以自定义滚动方向、偏移量和滚动频率，以适应不同场景需求。

摘要由CSDN通过智能技术生成

使用说明：xMarquee(' 对象id ',' 滚动方向 ',' 偏移(正整数,越大滚动越快，默认 1) ',' 频率(正整数,越小滚动越快，默认 50) ');

根据个人需求可以对'偏移'和'频率'进行调整，达到最佳效果。

<!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=utf-8" />
<title>无限滚动</title>
<style>
body{ font-size:12px;}
.xMarquee{ width:280px;overflow:hidden;height:32px;}
img,a{border:0px;}
.l{ float:left; padding:20px;}
</style>
<script>
    function xMarquee(obj,fx,temp,speed){
        obj = document.getElementById(obj);
        var xh = obj.innerHTML;
        var sid = 'xScroll_'+Math.floor(Math.random()*10000);
        var neh = '';
        var fc ;
        if(fx==""||fx=="right"||fx==null){
             neh = '<div style="display:block;float:left;">'+xh+'</div>';
            obj.innerHTML = '<div id="'+sid+'" style=" width:9900%;">'+neh+neh+'<div style="clear:both;"></div></div>';
            fc = document.getElementById(sid).childNodes;
            if(fc[0].offsetWidth<=obj.offsetWidth){obj.innerHTML = xh;return;}
            document.getElementById(sid).style.width = fc[0].offsetWidth*2+'px';
        }else if(fx=="up"||fx=="down"){
            neh = '<div style="display:block;">'+xh+'</div>';
            obj.innerHTML = '<div id="'+sid+'">'+neh+neh+'<div style="clear:both;"></div></div>';
            fc = document.getElementById(sid).childNodes;
            if(fc[0].offsetHeight<=obj.offsetHeight){obj.innerHTML = xh;return;}
            document.getElementById(sid).style.height = fc[0].offsetHeight*2+'px';
        }
        var t = 0;
        if(fx==''||typeof fx == undefined||fx==null){fx = "left";}
        if(temp==''||typeof temp == undefined||temp==null){temp = 1;}
        if(speed==''||typeof speed == undefined||speed==null){speed = 50;}
        if(fx=="right"){obj.scrol