贴几个论坛发大图贴的代码 样式对照<多图滚动 添加音乐》

admin

<style>
  .scrolling-images {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
  }
  .scrolling-images img {
    display: inline-block;
    height: 574px; /* 根据需求调整 */
    animation: scroll 20s linear infinite;



  }
  @keyframes scroll {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
  }
  .gif-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

<div class="scrolling-images">
  <img src="https://cccimg.com/view.php/e721d51e781eec524d7b833bd0f49fff.jpeg" alt="Image 1">
  <img src="https://cccimg.com/view.php/50d0b82d447810b74276c23291cb0ca6.jpeg
" alt="Image 2">
  <img src="https://cccimg.com/view.php/73321d6e11bc515e6e3dad27d8188484.jpeg" alt="Image 3">
  <!-- 更多图片 -->
</div>



<video loop autoplay src="https://cccimg.com/view.php/bf05a69dcbfe8495c99261b3cdb2cdc0.mp3"></video></div>



三图滚动  可添加

admin

<img src="https://cccimg.com/view.php/553fea6603e05992b93201b0d29aced3.gif" style="position:absolute;width:1300px;height:863px;margin-left: -0px;" />
<div style="height:1000px;"></div>


<img src="https://cccimg.com/view.php/054b5363cf69fc4d278e07e57b94a70d.gif" style="position:absolute;width:1344px;height:576px;margin-left: -0px;" />
<div style="height:1000px;"></div>



同框多图

admin

<img src="https://cccimg.com/view.php/c733ca5cce3a15fefd2f5d8a3b78c3bc.gif
" style="position: absolute; width: 1360px;height: 769px;margin-top:100px; margin-left: -0px;" />
<div style="height:1080px;"></div>

admin

<img src="https://cccimg.com/view.php/11ddede093ca08aa486868e95e663a9c.gif
" style="position: absolute; width: 1300px;height: 731px;margin-top:100px; margin-left: -0px;" />
<div style="height:1080px;"></div>

admin

<img src="https://cccimg.com/view.php/c72921fc6252538022185e6fae4afac6.jpeg

" style="position: absolute; width: 1500px;height: 643px;margin-top:100px; margin-left: -150px;" />
<div style="height:1080px;"></div>


-150px这个数值是到右边的距离。若图片系偏右就增加，图片偏左就减少。每个论坛有点差别，不合适就调整一下。上边代码中还有的是0，这只是适合这里。

admin

<style>
        :root        {--w:1416px;--h:607px;}
  #oBlk {
    margin-left: 50% ; left:calc(-0.5 * var(--w));
    margin-top:50px;
    width: var(--w);
    height: var(--h);
    box-shadow: 3px 3px 10px #000;
    overflow: hidden;
    position: absolute;
  }

  #oBlk::before,
  #oBlk::after {
    position: absolute;
    content: '';
    left: var(--curX0);
    top: 0px;
    width: 100%;
    height: 100%;
    background: url('https://cccimg.com/view.php/73321d6e11bc515e6e3dad27d8188484.jpeg.jpg') no-repeat center / cover;
  }

  #oBlk::after {
    left: var(--curX1);
    transform: scaleX(-1);
  }
  #comp {height:calc(var(--h) + 100px);}
</style>
<div id="oBlk"></div>
<div id="comp"></div>
<script>
{
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('5 4=6.g;5 7=1.0,8=0,2=0,3=4,b;5 9=()=>{2-=7;3-=7;a(2<=-4)2=4;a(3<=-4)3=4;8=3+(2>=0?1:-1);6.c.d(\'--2\',2+\'e\');6.c.d(\'--3\',8+\'e\');b=f(9)};9();',17,17,'||curX0|curX1|blkWidth|let|oBlk|step|tune|moving|if|raf|style|setProperty|px|requestAnimationFrame|offsetWidth'.split('|'),0,{}))
}  
</script>

以上是单幅图片无缝滚动

admin

<img src="https://cccimg.com/view.php/c72921fc6252538022185e6fae4afac6.jpeg

" style="position: absolute; width: 1500px;height: 643px;margin-top:100px; margin-left: -150px;" />
<div style="height:1080px;"></div>


单幅大图

admin

<img src="https://cccimg.com/view.php/ff9da74907bbed598ede17e52370fccc.gif

" style="position: absolute; width: 1500px;height: 643px;margin-top:100px; margin-left: -150px;" />
<div style="height:1080px;"></div>


GIF大图

admin

<div style="position:relative; left: -0px;"><img src="https://cccimg.com/view.php/26880367f5e34e1483cb38c045a82ff0.jpeg"></img>
<img style="position:absolute; left:
0px; top: 10px;" width=800 height=400  src="https://cccimg.com/view.php/d88a161b163e29afa1dd2a18a203fba2.gif"></img>
<marquee style="position:absolute; left: 450px; top: 500px;" width=380 height=130 scrollamount=1 direction=up  onmouseover=stop() onmouseout=start()>


背景大图添加前景GIF图片，背景图片不能过小