设为首页收藏本站
开启辅助访问 切换到宽版 登录 立即注册 QQ登录

花潮论坛

搜索
热搜: 活动 交友 discuz
返回列表 发新帖
查看: 20|回复: 5

[其他] 请教自动切换图片代码

[复制链接]
魏淑芬
  • TA的每日心情
    无聊
    2026-4-26 13:18

    • 签到天数: 187 天

    [LV.7]常住居民III

    24

    主题

    411

    回帖

    3306

    积分

    论坛元老

    Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80
    发表于 2026-4-26 15:02 | 显示全部楼层 |阅读模式

    请马上登录，朋友们都在花潮里等着你哦：）

    您需要 登录 才可以下载或查看，没有账号？立即注册

    x
    本帖最后由 魏淑芬 于 2026-4-26 15:02 编辑

    我只是把代码转帖过来了，不知道这些代码都是什么意思，希望老师帮忙解释一下，谢谢啦！
    1. <table cellspacing="0" cellpadding="0"><tbody><tr><td class="t_f" id="postmessage_12239665">
    2. <style type="text/css">
    3. #pichold {
    4. width:30000px;
    5. height:523px;
    6. animation: pshift 160s ease-out infinite alternate;
    7. }
    8. #pichold img {width:1000px;height:523px;float:left;}
    9. #outframe {
    10. width:1000px;
    11. height:523px; margin:160px 0 16px -202px;
    12. overflow:hidden;
    13. border-radius:32px;
    15. position:relative;
    17. ----webkit-mask-image: radial-gradient(black 60%, transparent 90%);
    18. }
    20. @keyframes pshift {
    21. 0%,3% {
    22. margin-left: 0px;
    23. }
    25. 4%,7% {
    26. margin-left: -1000px;
    27. }
    29. 8%,11% {
    30. margin-left: -2000px;
    31. }
    33. 12%,15% {
    34. margin-left: -3000px;
    35. }
    37. 16%,19% {
    38. margin-left: -4000px;
    39. }
    41. 20%,23% {
    42. margin-left: -5000px;
    43. }
    45. 24%,27% {
    46. margin-left: -6000px;
    47. }
    49. 28%,31% {
    50. margin-left: -7000px;
    51. }
    52. 32%,35% {
    53. margin-left: -8000px;
    54. }
    55. 36%,39% {
    56. margin-left: -9000px;
    57. }
    58. 40%,43% {
    59. margin-left: -10000px;
    60. }
    61. 44%,47% {
    62. margin-left: -11000px;
    63. }
    64. 48%,51% {
    65. margin-left: -12000px;
    66. }
    67. 52%,55% {
    68. margin-left: -13000px;
    69. }
    70. 56%,59%{
    71. margin-left: -14000px;
    72. }
    73. 60%,63% {
    74. margin-left: -15000px;
    75. }
    76. 64%,67% {
    77. margin-left: -16000px;
    78. }
    79. 68%,71% {
    80. margin-left: -17000px;
    81. }
    82. 72%,75% {
    83. margin-left: -18000px;
    84. }
    85. 76%,79% {
    86. margin-left: -19000px;
    87. }
    88. 80%,83% {
    89. margin-left: -20000px;
    90. }
    91. 84%,87% {
    92. margin-left: -21000px;
    93. }
    94. 88%,91% {
    95. margin-left: -22000px;
    96. }
    97. 94%,97% {
    98. margin-left: -23000px;
    99. }
    100. 98%,100% {
    101. margin-left: -24000px;
    102. }
    103. }
    104. </style>
    107. <!-- script type="text/javascript" src="processLRC.js" ></script -->
    115. <div id="outframe">
    116. <div id="pichold">
    117. <img src="https://pic1.imgdb.cn/item/69e49781f7aea953f2c52c13.png">
    118. <img src="https://pic1.imgdb.cn/item/69e49777f7aea953f2c52bb9.jpg">
    119. <img src="https://pic1.imgdb.cn/item/69e4977af7aea953f2c52bc3.jpg">
    120. <img src="https://pic1.imgdb.cn/item/69e49782f7aea953f2c52c1c.png">
    121. <img src="https://pic1.imgdb.cn/item/69e4977ef7aea953f2c52bee.jpg">
    122. <img src="https://pic1.imgdb.cn/item/69e49781f7aea953f2c52c0e.jpg">
    123. <img src="https://pic1.imgdb.cn/item/69e4978ff7aea953f2c52c78.png">
    124. <img src="https://pic1.imgdb.cn/item/69e49786f7aea953f2c52c34.jpg">
    125. <img src="https://pic1.imgdb.cn/item/69e49786f7aea953f2c52c39.jpg">
    126. <img src="https://pic1.imgdb.cn/item/69e49795f7aea953f2c52ca7.png">
    127. <img src="https://pic1.imgdb.cn/item/69e497a4f7aea953f2c52d1e.png">
    128. <img src="https://pic1.imgdb.cn/item/69e4979af7aea953f2c52cc3.jpg">
    129. <img src="https://pic1.imgdb.cn/item/69e4979af7aea953f2c52cc1.jpg">
    130. <img src="https://pic1.imgdb.cn/item/69e4979af7aea953f2c52cc7.jpg">
    131. <img src="https://pic1.imgdb.cn/item/69e49799f7aea953f2c52cbd.jpg">
    132. <img src="https://pic1.imgdb.cn/item/69e497a0f7aea953f2c52ceb.jpg">
    133. <img src="https://pic1.imgdb.cn/item/671f554bd29ded1a8c0f0211.jpg">
    134. <img src="https://pic1.imgdb.cn/item/69e497b1f7aea953f2c52d36.png">
    135. <img src="https://pic1.imgdb.cn/item/69e497b5f7aea953f2c52d39.png">
    136. <img src="https://pic1.imgdb.cn/item/69e497baf7aea953f2c52d3d.png">
    137. <img src="https://pic1.imgdb.cn/item/69e497baf7aea953f2c52d3e.png">
    138. <img src="https://pic1.imgdb.cn/item/69e497baf7aea953f2c52d3c.jpg">
    139. <img src="https://pic1.imgdb.cn/item/671f554bd29ded1a8c0f0211.jpg">
    140. <img src="https://pic1.imgdb.cn/item/69e497a4f7aea953f2c52d1e.png" />
    141. <img src="https://pic1.imgdb.cn/item/69e4979af7aea953f2c52cc3.jpg" />
    142. </div>
    144. </div></td></tr></tbody></table>
    复制代码

    评分

    参与人数 1威望 +50 金钱 +100 经验 +50 收起 理由
    梦油 + 50 + 100 + 50 匠心独运，细节精致入微！

    查看全部评分

    回复

    使用道具 举报

    魏淑芬
  • TA的每日心情
    无聊
    2026-4-26 13:18

    • 签到天数: 187 天

    [LV.7]常住居民III

    24

    主题

    411

    回帖

    3306

    积分

    论坛元老

    Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80
     楼主| 发表于 2026-4-26 15:04 | 显示全部楼层
    我是想把图片换成自己的，图片尺寸与这个肯定不一样，数量也不同，应该怎样替换和修改代码呢？
    回复 支持 反对

    使用道具 举报

    也曾年轻

    该用户从未签到

    166

    主题

    2080

    回帖

    1万

    积分

    论坛元老

    Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生飞龙在天王者至尊大将风范音画大师天籁妙音
    发表于 2026-4-26 16:49 | 显示全部楼层
    魏淑芬 发表于 2026-4-26 15:04
    我是想把图片换成自己的，图片尺寸与这个肯定不一样，数量也不同，应该怎样替换和修改代码呢？
    1. <style type="text/css">
    2. :root   {--w:1000px; /*图片宽度*/ --h:523px; /*图片高度*/}   /*  这样设置方便根据图片尺寸修改 */
    3. #outframe {  /* 最外层div的设置  */
    4.     width:var(--w);
    5.     height:var(--h);
    6.     margin:160px auto;
    7.     overflow:hidden;
    8.     border-radius:32px;
    9.     position:relative;
    10. }
    11. #pichold {  /*  图片框设置 */
    12.     width:calc(25 * var(--w));    /* 这一层的宽度 = 图片张数 * 图片宽度  */
    13.     height:var(--h);
    14.     animation: pshift 160s ease-out infinite alternate;  /* 添加图片动态 : 动态名称 持续时间  动态方式  无限循环 往复动作  */
    15. }
    16. #pichold img {width:var(--w);height:var(--h);float:left;}   /* 图片设置  宽  高  向左看齐 */

    18. @keyframes pshift { /* 动态动作设置 , 共25张图片， 每张图片显示及退出时间是总时长的 4%， 其中停留 3%，进出 1% , 每次切换图片实际由图片框左移 1000px 来实现  */
    19. 0%,3% {margin-left: 0px;}
    20. 4%,7% {margin-left: -1000px;}
    21. 8%,11% {margin-left: -2000px;}
    22. 12%,15% {margin-left: -3000px;}
    23. 16%,19% {margin-left: -4000px;}
    24. 20%,23% {margin-left: -5000px;}
    25. 24%,27% {margin-left: -6000px;}
    26. 28%,31% {margin-left: -7000px;}
    27. 32%,35% {margin-left: -8000px;}
    28. 36%,39% {margin-left: -9000px;}
    29. 40%,43% {margin-left: -10000px;}
    30. 44%,47% {margin-left: -11000px;}
    31. 48%,51% {margin-left: -12000px;}
    32. 52%,55% {margin-left: -13000px;}
    33. 56%,59%{margin-left: -14000px;}
    34. 60%,63% {margin-left: -15000px;}
    35. 64%,67% {margin-left: -16000px;}
    36. 68%,71% {margin-left: -17000px;}
    37. 72%,75% {margin-left: -18000px;}
    38. 76%,79% {margin-left: -19000px;}
    39. 80%,83% {margin-left: -20000px;}
    40. 84%,87% {margin-left: -21000px;}
    41. 88%,91% {margin-left: -22000px;}
    42. 94%,97% {margin-left: -23000px;}
    43. 98%,100% {margin-left: -24000px;}
    44. }
    45. </style>

    47. <div id="outframe">
    48. <div id="pichold">
    49. <img src="https://pic1.imgdb.cn/item/69e49781f7aea953f2c52c13.png">
    50. <img src="https://pic1.imgdb.cn/item/69e49777f7aea953f2c52bb9.jpg">
    51. <img src="https://pic1.imgdb.cn/item/69e4977af7aea953f2c52bc3.jpg">
    52. <img src="https://pic1.imgdb.cn/item/69e49782f7aea953f2c52c1c.png">
    53. <img src="https://pic1.imgdb.cn/item/69e4977ef7aea953f2c52bee.jpg">
    54. <img src="https://pic1.imgdb.cn/item/69e49781f7aea953f2c52c0e.jpg">
    55. <img src="https://pic1.imgdb.cn/item/69e4978ff7aea953f2c52c78.png">
    56. <img src="https://pic1.imgdb.cn/item/69e49786f7aea953f2c52c34.jpg">
    57. <img src="https://pic1.imgdb.cn/item/69e49786f7aea953f2c52c39.jpg">
    58. <img src="https://pic1.imgdb.cn/item/69e49795f7aea953f2c52ca7.png">
    59. <img src="https://pic1.imgdb.cn/item/69e497a4f7aea953f2c52d1e.png">
    60. <img src="https://pic1.imgdb.cn/item/69e4979af7aea953f2c52cc3.jpg">
    61. <img src="https://pic1.imgdb.cn/item/69e4979af7aea953f2c52cc1.jpg">
    62. <img src="https://pic1.imgdb.cn/item/69e4979af7aea953f2c52cc7.jpg">
    63. <img src="https://pic1.imgdb.cn/item/69e49799f7aea953f2c52cbd.jpg">
    64. <img src="https://pic1.imgdb.cn/item/69e497a0f7aea953f2c52ceb.jpg">
    65. <img src="https://pic1.imgdb.cn/item/671f554bd29ded1a8c0f0211.jpg">
    66. <img src="https://pic1.imgdb.cn/item/69e497b1f7aea953f2c52d36.png">
    67. <img src="https://pic1.imgdb.cn/item/69e497b5f7aea953f2c52d39.png">
    68. <img src="https://pic1.imgdb.cn/item/69e497baf7aea953f2c52d3d.png">
    69. <img src="https://pic1.imgdb.cn/item/69e497baf7aea953f2c52d3e.png">
    70. <img src="https://pic1.imgdb.cn/item/69e497baf7aea953f2c52d3c.jpg">
    71. <img src="https://pic1.imgdb.cn/item/671f554bd29ded1a8c0f0211.jpg">
    72. <img src="https://pic1.imgdb.cn/item/69e497a4f7aea953f2c52d1e.png" />
    73. <img src="https://pic1.imgdb.cn/item/69e4979af7aea953f2c52cc3.jpg" />
    74. </div>

    76. </div>
    复制代码
    回复 支持 反对

    使用道具 举报

    梦油
  • TA的每日心情
    奋斗
    2026-4-26 09:24

    • 签到天数: 1478 天

    [LV.10]以坛为家III

    1856

    主题

    5万

    回帖

    16万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生缤纷心情心曲飞扬七彩绚丽花好月圆飞龙在天王者至尊妙笔生花共看流星风雨同行幸福快乐喜乐安康心想事成前途似锦开朗大方花潮管理
    发表于 2026-4-26 17:07 | 显示全部楼层
    外行看热闹，内行看门道。我看着图很美。

    随遇而安、顺其自然、与世无争、处之晏然、自娱自乐、安度晚年。
    回复 支持 反对

    使用道具 举报

    亚伦影音工作室
  • TA的每日心情
    开心
    2026-4-3 00:24

    • 签到天数: 17 天

    [LV.4]偶尔看看III

    872

    主题

    864

    回帖

    4万

    积分

    贵宾

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪奔放热烈春风拂面缤纷心情王者至尊大将风范金剪刀音画大师天籁妙音妙笔生花
    发表于 2026-4-26 17:37 | 显示全部楼层
    • <style>
    • #pa{position: relative;margin: 30px -300px;width: 1186px;height: 680px;box-shadow: 3px 3px 6px gray;overflow: hidden;z-index: 10000;background: #0000 ;}
    • #slider {
    •   position: relative;
    • width: calc(100% * 10);
    •   margin: 0;
    •   left: 0px;
    •   text-align: left;
    •   font-size: 0;
    •   animation: 15s slidy infinite;
    • }
    • #slider img{
    •      width: calc(100% / 10);
    •   float: left;
    •   }
    •   @keyframes slidy {
    •    0% ,5%{ left: 0%; }
    • 10% ,15%{ left: -100%; }
    • 20% ,25%{ left: -200%; }
    • 30% ,35%{ left: -300%; }
    • 40% ,45%{ left: -400%; }
    • 50% ,55%{ left: -500%; }
    • 60% ,65%{ left: -600%; }
    • 70% ,75%{ left: -700%; }
    • 80% ,85%{ left: -800%; }
    • 90% ,95%,100%{left: -900%; }
    • }
    • #fullscreen{border-radius: 4px;position: absolute;
    •   color:#fff;background:#0000;box-shadow:  0px 0px 0px 0px #fff;
    •   padding: 4px 8px;z-index: 120;
    • font-size: 25px;font-weight: 100;
    • border: none;
    •   cursor: pointer;top: 5px;left: 8%;
    • }
    • </style>
    • <div id="pa">
    • <div id="fullscreen">全屏欣赏</div>
    • <div id="slider">
    •       <img src="https://img1.oldkids.cn/upload/2020/10/26/photo_20201026181006270.jpg" alt="1">
    •     <img src="https://img2.oldkids.cn/upload/2020/10/26/photo_20201026181005141.jpg" alt="2">
    •     <img src="https://img1.oldkids.cn/upload/2020/10/26/photo_20201026181006062.jpg" alt="3">
    •     <img src="https://img2.oldkids.cn/upload/2020/10/26/photo_20201026181005755.jpg" alt="4">
    •     <img src="https://img4.oldkids.cn/upload/2026/04/07/photo_0_20260407130451117.jpg" alt="5">
    •     <img src="https://img1.oldkids.cn/upload/2020/10/26/photo_20201026181004425.jpg" alt="6">
    •     <img src="https://img3.oldkids.cn/upload/2026/04/07/photo_0_20260407130426911.jpg" alt="7">
    •     <img src="https://img2.oldkids.cn/upload/2026/04/07/photo_0_20260407130651191.jpg" alt="8">
    •     <img src="https://img3.oldkids.cn/upload/2026/04/07/photo_0_20260407130808555.gif" alt="9">
    •      <img src="https://img4.oldkids.cn/upload/2020/10/26/photo_20201026181005694.jpg" alt="10">
    •   </div>
    • </div>
    • <script>
    • let fs = true;
    •         fullscreen.onclick = () => {
    •             if (fs) {
    •                 fullscreen.innerText = '退出全屏';
    •                pa.requestFullscreen();
    •             } else {
    •                 fullscreen.innerText = '全屏欣赏';
    •                 document.exitFullscreen();
    •             }
    •             fs = !fs;
    •         };
    • </script>
    回复 支持 反对

    使用道具 举报

    亚伦影音工作室
  • TA的每日心情
    开心
    2026-4-3 00:24

    • 签到天数: 17 天

    [LV.4]偶尔看看III

    872

    主题

    864

    回帖

    4万

    积分

    贵宾

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪奔放热烈春风拂面缤纷心情王者至尊大将风范金剪刀音画大师天籁妙音妙笔生花
    发表于 2026-4-26 17:39 | 显示全部楼层
    亚伦影音工作室 发表于 2026-4-26 17:37
  • #pa{position: relative;margin: 30px -300px;width: 1186px;height: 680px;box-shadow: 3px 3px ...
    • 全屏欣赏
    1 2 3 4 5 6 7 8 9 10
    回复 支持 反对

    使用道具 举报

    返回列表 发新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|手机版|Archiver|服务支持：DZ动力|huachaowang.com Inc. ( 蜀ICP备17032287号-1 )

    GMT+8, 2026-4-26 17:43 , Processed in 0.065672 second(s), 26 queries .

    Powered by Discuz! X3.4

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表