请教自动切换图片代码

魏淑芬 发表于 2026-4-26 15:02

本帖最后由魏淑芬于 2026-4-26 15:02 编辑 <br /><br /><table cellspacing="0" cellpadding="0"><tbody><tr><td class="t_f" id="postmessage_12239665">
<style type="text/css">
#pichold {
width:30000px;
height:523px;
animation: pshift 160s ease-out infinite alternate;
}
#pichold img {width:1000px;height:523px;float:left;}
#outframe {
width:1000px;
height:523px; margin:160px 0 16px -202px;
overflow:hidden;
border-radius:32px;

position:relative;

----webkit-mask-image: radial-gradient(black 60%, transparent 90%);
}

@keyframes pshift {
0%,3% {
margin-left: 0px;
}

4%,7% {
margin-left: -1000px;
}

8%,11% {
margin-left: -2000px;
}

12%,15% {
margin-left: -3000px;
}

16%,19% {
margin-left: -4000px;
}

20%,23% {
margin-left: -5000px;
}

24%,27% {
margin-left: -6000px;
}

28%,31% {
margin-left: -7000px;
}
32%,35% {
margin-left: -8000px;
}
36%,39% {
margin-left: -9000px;
}
40%,43% {
margin-left: -10000px;
}
44%,47% {
margin-left: -11000px;
}
48%,51% {
margin-left: -12000px;
}
52%,55% {
margin-left: -13000px;
}
56%,59%{
margin-left: -14000px;
}
60%,63% {
margin-left: -15000px;
}
64%,67% {
margin-left: -16000px;
}
68%,71% {
margin-left: -17000px;
}
72%,75% {
margin-left: -18000px;
}
76%,79% {
margin-left: -19000px;
}
80%,83% {
margin-left: -20000px;
}
84%,87% {
margin-left: -21000px;
}
88%,91% {
margin-left: -22000px;
}
94%,97% {
margin-left: -23000px;
}
98%,100% {
margin-left: -24000px;
}
}
</style>



<div id="outframe">
<div id="pichold">
<img src="https://pic1.imgdb.cn/item/69e49781f7aea953f2c52c13.png">
<img src="https://pic1.imgdb.cn/item/69e49777f7aea953f2c52bb9.jpg">
<img src="https://pic1.imgdb.cn/item/69e4977af7aea953f2c52bc3.jpg">
<img src="https://pic1.imgdb.cn/item/69e49782f7aea953f2c52c1c.png">
<img src="https://pic1.imgdb.cn/item/69e4977ef7aea953f2c52bee.jpg">
<img src="https://pic1.imgdb.cn/item/69e49781f7aea953f2c52c0e.jpg">
<img src="https://pic1.imgdb.cn/item/69e4978ff7aea953f2c52c78.png">
<img src="https://pic1.imgdb.cn/item/69e49786f7aea953f2c52c34.jpg">
<img src="https://pic1.imgdb.cn/item/69e49786f7aea953f2c52c39.jpg">
<img src="https://pic1.imgdb.cn/item/69e49795f7aea953f2c52ca7.png">
<img src="https://pic1.imgdb.cn/item/69e497a4f7aea953f2c52d1e.png">
<img src="https://pic1.imgdb.cn/item/69e4979af7aea953f2c52cc3.jpg">
<img src="https://pic1.imgdb.cn/item/69e4979af7aea953f2c52cc1.jpg">
<img src="https://pic1.imgdb.cn/item/69e4979af7aea953f2c52cc7.jpg">
<img src="https://pic1.imgdb.cn/item/69e49799f7aea953f2c52cbd.jpg">
<img src="https://pic1.imgdb.cn/item/69e497a0f7aea953f2c52ceb.jpg">
<img src="https://pic1.imgdb.cn/item/671f554bd29ded1a8c0f0211.jpg">
<img src="https://pic1.imgdb.cn/item/69e497b1f7aea953f2c52d36.png">
<img src="https://pic1.imgdb.cn/item/69e497b5f7aea953f2c52d39.png">
<img src="https://pic1.imgdb.cn/item/69e497baf7aea953f2c52d3d.png">
<img src="https://pic1.imgdb.cn/item/69e497baf7aea953f2c52d3e.png">
<img src="https://pic1.imgdb.cn/item/69e497baf7aea953f2c52d3c.jpg">
<img src="https://pic1.imgdb.cn/item/671f554bd29ded1a8c0f0211.jpg">
<img src="https://pic1.imgdb.cn/item/69e497a4f7aea953f2c52d1e.png" />
<img src="https://pic1.imgdb.cn/item/69e4979af7aea953f2c52cc3.jpg" />
</div>

</div></td></tr></tbody></table>

我只是把代码转帖过来了，不知道这些代码都是什么意思，希望老师帮忙解释一下，谢谢啦！
<table cellspacing="0" cellpadding="0"><tbody><tr><td class="t_f" id="postmessage_12239665">
<style type="text/css">
#pichold {
width:30000px;
height:523px;
animation: pshift 160s ease-out infinite alternate;
}
#pichold img {width:1000px;height:523px;float:left;}
#outframe {
width:1000px;
height:523px; margin:160px 0 16px -202px;
overflow:hidden;
border-radius:32px;

position:relative;

----webkit-mask-image: radial-gradient(black 60%, transparent 90%);
}

@keyframes pshift {
0%,3% {
margin-left: 0px;
}

4%,7% {
margin-left: -1000px;
}

8%,11% {
margin-left: -2000px;
}

12%,15% {
margin-left: -3000px;
}

16%,19% {
margin-left: -4000px;
}

20%,23% {
margin-left: -5000px;
}

24%,27% {
margin-left: -6000px;
}

28%,31% {
margin-left: -7000px;
}
32%,35% {
margin-left: -8000px;
}
36%,39% {
margin-left: -9000px;
}
40%,43% {
margin-left: -10000px;
}
44%,47% {
margin-left: -11000px;
}
48%,51% {
margin-left: -12000px;
}
52%,55% {
margin-left: -13000px;
}
56%,59%{
margin-left: -14000px;
}
60%,63% {
margin-left: -15000px;
}
64%,67% {
margin-left: -16000px;
}
68%,71% {
margin-left: -17000px;
}
72%,75% {
margin-left: -18000px;
}
76%,79% {
margin-left: -19000px;
}
80%,83% {
margin-left: -20000px;
}
84%,87% {
margin-left: -21000px;
}
88%,91% {
margin-left: -22000px;
}
94%,97% {
margin-left: -23000px;
}
98%,100% {
margin-left: -24000px;
}
}
</style>



<div id="outframe">
<div id="pichold">
<img src="https://pic1.imgdb.cn/item/69e49781f7aea953f2c52c13.png">
<img src="https://pic1.imgdb.cn/item/69e49777f7aea953f2c52bb9.jpg">
<img src="https://pic1.imgdb.cn/item/69e4977af7aea953f2c52bc3.jpg">
<img src="https://pic1.imgdb.cn/item/69e49782f7aea953f2c52c1c.png">
<img src="https://pic1.imgdb.cn/item/69e4977ef7aea953f2c52bee.jpg">
<img src="https://pic1.imgdb.cn/item/69e49781f7aea953f2c52c0e.jpg">
<img src="https://pic1.imgdb.cn/item/69e4978ff7aea953f2c52c78.png">
<img src="https://pic1.imgdb.cn/item/69e49786f7aea953f2c52c34.jpg">
<img src="https://pic1.imgdb.cn/item/69e49786f7aea953f2c52c39.jpg">
<img src="https://pic1.imgdb.cn/item/69e49795f7aea953f2c52ca7.png">
<img src="https://pic1.imgdb.cn/item/69e497a4f7aea953f2c52d1e.png">
<img src="https://pic1.imgdb.cn/item/69e4979af7aea953f2c52cc3.jpg">
<img src="https://pic1.imgdb.cn/item/69e4979af7aea953f2c52cc1.jpg">
<img src="https://pic1.imgdb.cn/item/69e4979af7aea953f2c52cc7.jpg">
<img src="https://pic1.imgdb.cn/item/69e49799f7aea953f2c52cbd.jpg">
<img src="https://pic1.imgdb.cn/item/69e497a0f7aea953f2c52ceb.jpg">
<img src="https://pic1.imgdb.cn/item/671f554bd29ded1a8c0f0211.jpg">
<img src="https://pic1.imgdb.cn/item/69e497b1f7aea953f2c52d36.png">
<img src="https://pic1.imgdb.cn/item/69e497b5f7aea953f2c52d39.png">
<img src="https://pic1.imgdb.cn/item/69e497baf7aea953f2c52d3d.png">
<img src="https://pic1.imgdb.cn/item/69e497baf7aea953f2c52d3e.png">
<img src="https://pic1.imgdb.cn/item/69e497baf7aea953f2c52d3c.jpg">
<img src="https://pic1.imgdb.cn/item/671f554bd29ded1a8c0f0211.jpg">
<img src="https://pic1.imgdb.cn/item/69e497a4f7aea953f2c52d1e.png" />
<img src="https://pic1.imgdb.cn/item/69e4979af7aea953f2c52cc3.jpg" />
</div>

</div></td></tr></tbody></table>

魏淑芬 发表于 2026-4-26 15:04

我是想把图片换成自己的，图片尺寸与这个肯定不一样，数量也不同，应该怎样替换和修改代码呢？

也曾年轻 发表于 2026-4-26 16:49

魏淑芬发表于 2026-4-26 15:04
我是想把图片换成自己的，图片尺寸与这个肯定不一样，数量也不同，应该怎样替换和修改代码呢？

<style type="text/css">
:root {--w:1000px; /*图片宽度*/ --h:523px; /*图片高度*/} /*这样设置方便根据图片尺寸修改 */
#outframe {/* 最外层div的设置*/
width:var(--w);
height:var(--h);
margin:160px auto;
overflow:hidden;
border-radius:32px;
position:relative;
}
#pichold {/*图片框设置 */
width:calc(25 * var(--w)); /* 这一层的宽度 = 图片张数 * 图片宽度*/
height:var(--h);
animation: pshift 160s ease-out infinite alternate;/* 添加图片动态 : 动态名称持续时间动态方式无限循环往复动作*/
}
#pichold img {width:var(--w);height:var(--h);float:left;} /* 图片设置宽高向左看齐 */

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

<div id="outframe">
<div id="pichold">
<img src="https://pic1.imgdb.cn/item/69e49781f7aea953f2c52c13.png">
<img src="https://pic1.imgdb.cn/item/69e49777f7aea953f2c52bb9.jpg">
<img src="https://pic1.imgdb.cn/item/69e4977af7aea953f2c52bc3.jpg">
<img src="https://pic1.imgdb.cn/item/69e49782f7aea953f2c52c1c.png">
<img src="https://pic1.imgdb.cn/item/69e4977ef7aea953f2c52bee.jpg">
<img src="https://pic1.imgdb.cn/item/69e49781f7aea953f2c52c0e.jpg">
<img src="https://pic1.imgdb.cn/item/69e4978ff7aea953f2c52c78.png">
<img src="https://pic1.imgdb.cn/item/69e49786f7aea953f2c52c34.jpg">
<img src="https://pic1.imgdb.cn/item/69e49786f7aea953f2c52c39.jpg">
<img src="https://pic1.imgdb.cn/item/69e49795f7aea953f2c52ca7.png">
<img src="https://pic1.imgdb.cn/item/69e497a4f7aea953f2c52d1e.png">
<img src="https://pic1.imgdb.cn/item/69e4979af7aea953f2c52cc3.jpg">
<img src="https://pic1.imgdb.cn/item/69e4979af7aea953f2c52cc1.jpg">
<img src="https://pic1.imgdb.cn/item/69e4979af7aea953f2c52cc7.jpg">
<img src="https://pic1.imgdb.cn/item/69e49799f7aea953f2c52cbd.jpg">
<img src="https://pic1.imgdb.cn/item/69e497a0f7aea953f2c52ceb.jpg">
<img src="https://pic1.imgdb.cn/item/671f554bd29ded1a8c0f0211.jpg">
<img src="https://pic1.imgdb.cn/item/69e497b1f7aea953f2c52d36.png">
<img src="https://pic1.imgdb.cn/item/69e497b5f7aea953f2c52d39.png">
<img src="https://pic1.imgdb.cn/item/69e497baf7aea953f2c52d3d.png">
<img src="https://pic1.imgdb.cn/item/69e497baf7aea953f2c52d3e.png">
<img src="https://pic1.imgdb.cn/item/69e497baf7aea953f2c52d3c.jpg">
<img src="https://pic1.imgdb.cn/item/671f554bd29ded1a8c0f0211.jpg">
<img src="https://pic1.imgdb.cn/item/69e497a4f7aea953f2c52d1e.png" />
<img src="https://pic1.imgdb.cn/item/69e4979af7aea953f2c52cc3.jpg" />
</div>

</div>

梦油发表于 2026-4-26 17:07

外行看热闹，内行看门道。我看着图很美。

亚伦影音工作室 发表于 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>

亚伦影音工作室 发表于 2026-4-26 17:39

亚伦影音工作室发表于 2026-4-26 17:37
[*]
[*]#pa{position: relative;margin: 30px -300px;width: 1186px;height: 680px;box-shadow: 3px 3px ...

<style>
#papa{position: relative;margin: 30px -300px;width: 1186px;height: 680px;box-shadow: 3px 3px 6px gray;overflow: hidden;z-index: 10000;background: #0000 ;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";}
#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="papa">
<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 = '退出全屏';
            papa.requestFullscreen();
         } else {
            fullscreen.innerText = '全屏欣赏';
            document.exitFullscreen();
         }
         fs = !fs;
   };
</script>

亚伦影音工作室 发表于 2026-4-26 17:56

删掉一些无用的代码整理一下：

[*]<style type="text/css">
[*]#outframe {
[*] width:1000px;
[*] height:523px; margin:10px 0 16px 2px;
[*] overflow:hidden;
[*] border-radius:5px;
[*]position:relative;
[*]}
[*]
[*]#pichold{
[*] width:30000px;
[*] height:523px;
[*] animation: pshift 60s ease-out infinite alternate;
[*]}
[*]#pichold img{width:1000px;float:left;}
[*]@keyframes pshift {
[*] 0%,3% {
[*] margin-left: 0px;
[*] }
[*]
[*] 4%,7% {
[*] margin-left: -1000px;
[*] }
[*]
[*] 8%,11% {
[*] margin-left: -2000px;
[*] }
[*]
[*] 12%,15% {
[*] margin-left: -3000px;
[*] }
[*]
[*] 16%,19% {
[*] margin-left: -4000px;
[*] }
[*]
[*] 20%,23% {
[*] margin-left: -5000px;
[*] }
[*]
[*] 24%,27% {
[*] margin-left: -6000px;
[*] }
[*]
[*] 28%,31% {
[*] margin-left: -7000px;
[*] }
[*] 32%,35% {
[*] margin-left: -8000px;
[*] }
[*] 36%,39% {
[*] margin-left: -9000px;
[*] }
[*] 40%,43% {
[*] margin-left: -10000px;
[*] }
[*] 44%,47% {
[*] margin-left: -11000px;
[*] }
[*] 48%,51% {
[*] margin-left: -12000px;
[*] }
[*] 52%,55% {
[*] margin-left: -13000px;
[*] }
[*] 56%,59%{
[*] margin-left: -14000px;
[*] }
[*] 60%,63% {
[*] margin-left: -15000px;
[*] }
[*] 64%,67% {
[*] margin-left: -16000px;
[*] }
[*] 68%,71% {
[*] margin-left: -17000px;
[*] }
[*] 72%,75% {
[*] margin-left: -18000px;
[*] }
[*] 76%,79% {
[*] margin-left: -19000px;
[*] }
[*] 80%,83% {
[*] margin-left: -20000px;
[*] }
[*] 84%,87% {
[*] margin-left: -21000px;
[*] }
[*] 88%,91% {
[*] margin-left: -22000px;
[*] }
[*] 94%,97% {
[*] margin-left: -23000px;
[*] }
[*] 98%,100% {
[*] margin-left: -24000px;
[*] }
[*]}</style>
[*]<div id="outframe">
[*]<div id="pichold">
[*]<img src="https://pic1.imgdb.cn/item/69e49781f7aea953f2c52c13.png">
[*]<img src="https://pic1.imgdb.cn/item/69e49777f7aea953f2c52bb9.jpg">
[*]<img src="https://pic1.imgdb.cn/item/69e4977af7aea953f2c52bc3.jpg">
[*]<img src="https://pic1.imgdb.cn/item/69e49782f7aea953f2c52c1c.png">
[*]<img src="https://pic1.imgdb.cn/item/69e4977ef7aea953f2c52bee.jpg">
[*]<img src="https://pic1.imgdb.cn/item/69e49781f7aea953f2c52c0e.jpg">
[*]<img src="https://pic1.imgdb.cn/item/69e4978ff7aea953f2c52c78.png">
[*]<img src="https://pic1.imgdb.cn/item/69e49786f7aea953f2c52c34.jpg">
[*]<img src="https://pic1.imgdb.cn/item/69e49786f7aea953f2c52c39.jpg">
[*]<img src="https://pic1.imgdb.cn/item/69e49795f7aea953f2c52ca7.png">
[*]<img src="https://pic1.imgdb.cn/item/69e497a4f7aea953f2c52d1e.png">
[*]<img src="https://pic1.imgdb.cn/item/69e4979af7aea953f2c52cc3.jpg">
[*]<img src="https://pic1.imgdb.cn/item/69e4979af7aea953f2c52cc1.jpg">
[*]<img src="https://pic1.imgdb.cn/item/69e4979af7aea953f2c52cc7.jpg">
[*]<img src="https://pic1.imgdb.cn/item/69e49799f7aea953f2c52cbd.jpg">
[*]<img src="https://pic1.imgdb.cn/item/69e497a0f7aea953f2c52ceb.jpg">
[*]<img src="https://pic1.imgdb.cn/item/671f554bd29ded1a8c0f0211.jpg">
[*]<img src="https://pic1.imgdb.cn/item/69e497b1f7aea953f2c52d36.png">
[*]<img src="https://pic1.imgdb.cn/item/69e497b5f7aea953f2c52d39.png">
[*]<img src="https://pic1.imgdb.cn/item/69e497baf7aea953f2c52d3d.png">
[*]<img src="https://pic1.imgdb.cn/item/69e497baf7aea953f2c52d3e.png">
[*]<img src="https://pic1.imgdb.cn/item/69e497baf7aea953f2c52d3c.jpg">
[*]<img src="https://pic1.imgdb.cn/item/671f554bd29ded1a8c0f0211.jpg">
[*]<img src="https://pic1.imgdb.cn/item/69e497a4f7aea953f2c52d1e.png" />
[*]<img src="https://pic1.imgdb.cn/item/69e4979af7aea953f2c52cc3.jpg" />
[*]</div>
[*]</div>

霜染枫丹 发表于 2026-4-26 20:41

用轮播图的形式看照片能保持画质，特别好的形式，学习了！{:4_204:}{:4_190:}我也是只会套用{:4_173:}

也曾年轻 发表于 2026-4-26 21:04

本帖最后由也曾年轻于 2026-4-26 21:07 编辑 <br /><br /><style type="text/css">
:root { /*这样设置方便根据图片尺寸和张数修改 */
--w:600px; /*图片宽度*/
--h:600px;/*图片高度*/
--u:10; /* 图片张数 */
}
#oBlk {/* 最外层div的设置*/
width:var(--w);
height:var(--h);
margin:50px auto;
overflow:hidden;
border-radius:32px;
position:relative;
}
#picHolder {/*图片框设置 */
/* 这一层的宽度 = 图片张数 * 图片宽度*/
width:calc(var(--u) * var(--w));
height:var(--h);
/* 添加图片动态 : 动态名称持续时间动态方式无限循环往复动作*/
animation: mLeft 50s ease-in-out infinite alternate;
}
/* 图片设置宽高向左看齐 */
#picHolder img {width:var(--w);height:var(--h);float:left;}

/* 动态动作设置 , 共10张图片，每张图片显示及退出时间是总时长的 10%，其中停留 9%，进出 1% , 每次切换图片实际由图片框左移 --w来实现*/
@keyframes mLeft {
0%, 9% {margin-left: calc( 0 * var(--w));}
10%,19% {margin-left:calc(-1 * var(--w));}
20%,29%{margin-left: calc(-2 * var(--w));}
30%,39% {margin-left: calc(-3 * var(--w));}
40%,49% {margin-left: calc(-4 * var(--w));}
50%,59% {margin-left: calc(-5 * var(--w));}
60%,69% {margin-left: calc(-6 * var(--w));}
70%,79% {margin-left: calc(-7 * var(--w));}
80%,89% {margin-left: calc(-8 * var(--w));}
90%,100% {margin-left: calc(-9 * var(--w));}
}
</style>

<div id="oBlk">
<div id="picHolder">
<img src="https://s41.ax1x.com/2026/04/02/peJZWGR.jpg" />
<img src="https://s41.ax1x.com/2026/04/03/peYBvFg.jpg" />
<img src="https://s41.ax1x.com/2026/04/02/peJZIsK.jpg" />
<img src="https://s41.ax1x.com/2026/04/03/peYBTSA.jpg" />
<img src="https://s41.ax1x.com/2026/04/02/peJZ5M6.jpg" />
<img src="https://s41.ax1x.com/2026/04/02/peJZhxx.jpg" />
<img src="https://s41.ax1x.com/2026/04/02/peJZfR1.jpg" />
<img src="https://s41.ax1x.com/2026/04/02/peJZRi9.jpg" />
<img src="https://s41.ax1x.com/2026/04/02/peJZgIJ.jpg" />
<img src="https://s41.ax1x.com/2026/04/02/peJZca4.jpg" />
</div>

</div>

<style type="text/css">
:root { /*这样设置方便根据图片尺寸和张数修改 */
--w:600px; /*图片宽度*/
--h:600px;/*图片高度*/
--u:10; /* 图片张数 */
}
#oBlk {/* 最外层div的设置*/
width:var(--w);
height:var(--h);
margin:50px auto;
overflow:hidden;
border-radius:32px;
position:relative;
}
#picHolder {/*图片框设置 */
/* 这一层的宽度 = 图片张数 * 图片宽度*/
width:calc(var(--u) * var(--w));
height:var(--h);
/* 添加图片动态 : 动态名称持续时间动态方式无限循环往复动作*/
animation: mLeft 50s ease-in-out infinite alternate;
}
/* 图片设置宽高向左看齐 */
#picHolder img {width:var(--w);height:var(--h);float:left;}

/* 动态动作设置 , 共10张图片，每张图片显示及退出时间是总时长的 10%，其中停留 9%，进出 1% , 每次切换图片实际由图片框左移 --w来实现*/
@keyframes mLeft {
0%, 9% {margin-left: calc( 0 * var(--w));}
10%,19% {margin-left:calc(-1 * var(--w));}
20%,29%{margin-left: calc(-2 * var(--w));}
30%,39% {margin-left: calc(-3 * var(--w));}
40%,49% {margin-left: calc(-4 * var(--w));}
50%,59% {margin-left: calc(-5 * var(--w));}
60%,69% {margin-left: calc(-6 * var(--w));}
70%,79% {margin-left: calc(-7 * var(--w));}
80%,89% {margin-left: calc(-8 * var(--w));}
90%,100% {margin-left: calc(-9 * var(--w));}
}
</style>

<div id="oBlk">
<div id="picHolder">
<img src="https://s41.ax1x.com/2026/04/02/peJZWGR.jpg" />
<img src="https://s41.ax1x.com/2026/04/03/peYBvFg.jpg" />
<img src="https://s41.ax1x.com/2026/04/02/peJZIsK.jpg" />
<img src="https://s41.ax1x.com/2026/04/03/peYBTSA.jpg" />
<img src="https://s41.ax1x.com/2026/04/02/peJZ5M6.jpg" />
<img src="https://s41.ax1x.com/2026/04/02/peJZhxx.jpg" />
<img src="https://s41.ax1x.com/2026/04/02/peJZfR1.jpg" />
<img src="https://s41.ax1x.com/2026/04/02/peJZRi9.jpg" />
<img src="https://s41.ax1x.com/2026/04/02/peJZgIJ.jpg" />
<img src="https://s41.ax1x.com/2026/04/02/peJZca4.jpg" />
</div>

</div>

红影发表于 2026-4-26 22:53

在这个帖子里可以学习图片滚动了，魏淑芬提出的问题好，楼上各位老师的解答也好{:4_199:}

魏淑芬 发表于 2026-4-27 14:08

也曾年轻发表于 2026-4-26 16:49

谢谢老师及时耐心细致的指导！{:4_204:}
明白一些了，首先按照图片的长宽尺寸修改代码，然后算出所有图片总的宽度，这个宽度是100%，再计算出每张图片移动的百分比，和停留时间的百分比。

辛苦老师了，我会试试的。

魏淑芬 发表于 2026-4-27 14:11

梦油发表于 2026-4-26 17:07
外行看热闹，内行看门道。我看着图很美。

我也是门外汉啦，只会套用，不懂门道。这里有老师们的指导，获益匪浅，能学到很多。

魏淑芬 发表于 2026-4-27 14:14

亚伦影音工作室发表于 2026-4-26 17:37
[*]
[*]#pa{position: relative;margin: 30px -300px;width: 1186px;height: 680px;box-shadow: 3px 3px ...

谢谢老师细致的指导！{:4_171:}
您这里添加了一个“全屏欣赏”，更完美了。这个全屏的代码，是从52行到64行吗？

魏淑芬 发表于 2026-4-27 14:18

亚伦影音工作室发表于 2026-4-26 17:56
删掉一些无用的代码整理一下：

整理以后简洁多了。{:4_199:}

魏淑芬 发表于 2026-4-27 14:44

也曾年轻发表于 2026-4-26 21:04
本帖最后由也曾年轻于 2026-4-26 21:07 编辑
:root { /*这样设置方便根据图片尺寸和张数修改 */
...

太好啦，还有例题，更明白了。{:4_189:}

魏淑芬 发表于 2026-4-27 14:46

红影发表于 2026-4-26 22:53
在这个帖子里可以学习图片滚动了，魏淑芬提出的问题好，楼上各位老师的解答也好

这里的老师们太棒了，可以好好学习呢。

魏淑芬 发表于 2026-4-27 14:49

霜染枫丹发表于 2026-4-26 20:41
用轮播图的形式看照片能保持画质，特别好的形式，学习了！我也是只会套用

因为喜欢发照片，所以想多种形式试试，咱不会编码，会套用就行吧，哈哈{:5_106:}{:5_106:}{:5_106:}

梦油发表于 2026-4-27 16:34

魏淑芬发表于 2026-4-27 14:11
我也是门外汉啦，只会套用，不懂门道。这里有老师们的指导，获益匪浅，能学到很多。

咱们这里能人可不少，你也是其中一位。

红影发表于 2026-4-30 16:01

魏淑芬发表于 2026-4-27 14:46
这里的老师们太棒了，可以好好学习呢。

是啊，他们都是高手，特别厉害{:4_187:}

页: [1]

花潮论坛's Archiver

请教自动切换图片代码