清明上河图（图片走马灯测试）
<style type="text/css">.mBox {
margin: 10px auto;
width: 1620px;
height: 600px;
position: relative;
left: -504px;
top: 80px;
overflow: hidden;
border: 1px solid navy;
box-shadow: 2px 2px 4px 1px #444;
position: relative;
}
.pBox {
position: absolute;
animation: Roll 195s linear infinite;
display: flex;
}
.pBox:hover {
cursor: pointer;
animation-play-state: paused;
}
.pBox img {
width: 1620px;
height:600px;
float: left;
}
@keyframes Roll {
from { transform: translateX(0); }
to { transform: translateX(-91.66%); }
}
</style>
<div class="mBox">
<div id="pBox" class="pBox">
<img alt="" src="https://wj1.zp68.com:812/lxx/yunhua/20191220/1.jpg" />
<img alt="" src="https://wj1.zp68.com:812/lxx/yunhua/20191220/2.jpg" />
<img alt="" src="https://wj1.zp68.com:812/lxx/yunhua/20191220/3.jpg" />
<img alt="" src="https://wj1.zp68.com:812/lxx/yunhua/20191220/4.jpg" />
<img alt="" src="https://wj1.zp68.com:812/lxx/yunhua/20191220/5.jpg" />
<img alt="" src="https://wj1.zp68.com:812/lxx/yunhua/20191220/6.jpg" />
<img alt="" src="https://wj1.zp68.com:812/lxx/yunhua/20191220/7.jpg" />
<img alt="" src="https://wj1.zp68.com:812/lxx/yunhua/20191220/8.jpg" />
<img alt="" src="https://wj1.zp68.com:812/lxx/yunhua/20191220/9.jpg" />
<img alt="" src="https://wj1.zp68.com:812/lxx/yunhua/20191220/10.jpg" />
<img alt="" src="https://wj1.zp68.com:812/lxx/yunhua/20191220/11.jpg" />
<img alt="" src="https://wj1.zp68.com:812/lxx/yunhua/20191220/12.jpg" />
</div>
</div>
<audio id="ktv" src="https://wj1.zp68.com:812/lxx/yunhua/20191220/0120130429.mp3" loop="loop" autoplay="autoplay"></audio>
<script language="javascript">
var ktv = document.getElementById('ktv');
document.getElementById('pBox').onclick=function(){
ktv.paused ? ktv.play() : ktv.pause();
}
</script> 索性把原来的内容都搬来
清明上河图，中国十大传世名画之一。为北宋风俗画，北宋画家张择端仅见的存世精品，属国宝级文物，现藏于北京故宫博物院。清明上河图宽25.2厘米，长528厘米，绢本设色。作品以长卷形式，采用散点透视构图法，生动记录了中国十二世纪北宋汴京的城市面貌和当时汉族社会各阶层人民的生活状况。描绘当时清明时节的繁荣景象，是汴京当年繁荣的见证，也是北宋城市经济情况的写照。这在中国乃至世界绘画史上都是独一无二的。在五米多长的画卷里，共绘了814个各色人物，牛、骡、驴等牲畜73匹，车、轿二十多辆，大小船只二十九艘。房屋、桥梁、城楼等各有特色，体现了宋代建筑的特征。具有很高的历史价值和艺术价值。 素材：网络，编辑：小辣椒2019.12.30 @小辣椒 记得你弄过清明上河图，去找了一下，果然找到了。借用亲爱的素材测试一下走马灯{:4_173:} 作得真好看，师妹多才多艺。{:4_204:} 左移不够
樵歌 发表于 2022-1-19 14:17
作得真好看，师妹多才多艺。
这个是小辣椒的素材，我是借来学习一下走马灯效果的{:4_173:} 马黑黑 发表于 2022-1-19 14:19
左移不够
嗯嗯，我移动一下去{:4_171:} 现在这样子好厉害的样纸 马黑黑 发表于 2022-1-19 14:35
现在这样子好厉害的样纸
玩代码的最高境界是把自己玩嗨了，刚才看着这个图图不禁迷醉，遥想千年前的人们的生活，努力分辨里面的大户人家的豪宅和贩夫走卒的身影，仿佛回到了图里的时代{:4_189:} 红影 发表于 2022-1-19 15:03
玩代码的最高境界是把自己玩嗨了，刚才看着这个图图不禁迷醉，遥想千年前的人们的生活，努力分辨里面的大 ...
原图放大很多倍还很清晰 马黑黑 发表于 2022-1-19 15:05
原图放大很多倍还很清晰
嗯嗯，用了小辣椒的资源，那个图片应该是高清的。 是不是有一幅图不显示呢 红影 发表于 2022-1-19 15:11
嗯嗯，用了小辣椒的资源，那个图片应该是高清的。
是的 马黑黑 发表于 2022-1-19 15:12
是不是有一幅图不显示呢
应该不是，第一幅图前面本来就空一块边。
这个图图有点大，我鼠标都不知道放哪好了，想着要不要去掉鼠标移动就停止，只留点击才停的功能。 马黑黑 发表于 2022-1-19 15:20
是的
或者把第一幅图图裁一下，就看不出来了。 红影 发表于 2022-1-19 15:29
或者把第一幅图图裁一下，就看不出来了。
嗯，空的不应该留 红影 发表于 2022-1-19 15:24
应该不是，第一幅图前面本来就空一块边。
这个图图有点大，我鼠标都不知道放哪好了，想着要不要去掉鼠标 ...
不用去掉暂停功能 红影 发表于 2022-1-19 14:30
这个是小辣椒的素材，我是借来学习一下走马灯效果的
恭喜师妹的走马灯照亮清明上河图。{:4_173:} 那年在上海世博会挤进去看了两分钟就被挤出来，这次来好好恶补一下。 马黑黑 发表于 2022-1-19 15:55
嗯，空的不应该留
主要是懒得再上传了，就直接拿了图片地址{:4_173:}