|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 2022-1-20 11:01 编辑
这是完整代码,效果请查看:https://www.huachaowang.com/foru ... 6217&extra=page%3D1
- <style type="text/css">
- /* 外层盒子 宽度要与图片统一宽度一致*/
- .mBox {
- margin: 10px auto;
- width: 700px;
- height: 450px;
- position: relative;
- overflow: hidden;
- border: 1px solid navy;
- box-shadow: 2px 2px 4px 1px #444;
- }
- /* 图片盒子 时长可修改
- step是分步运行,多少张图就分多少步
- */
- .pBox {
- position: absolute;
- animation: Roll 30s infinite steps(10,end);
- display: block;
- }
- /* 图片盒子鼠标滑过 */
- .pBox:hover {
- cursor: pointer;
- animation-play-state: paused;
- }
- /* 图片统一尺寸 必须统一 */
- .pBox img {
- width: 700px;
- height:450px;
- float: left;
- }
- /* 动画 100%时的 top 值是依据所有图片高度总和
- 若横向变化用left, 100%是依据全部图片宽度总和
- */
- @keyframes Roll {
- 0% { top: 0px; }
- 100% { top: -4500px; }
- }
- </style>
- <div class="mBox">
- <div id="pBox" class="pBox">
- <img alt="" src="https://638183.freep.cn/638183/Pic/fj1.jpg" /><br>
- <img alt="" src="https://638183.freep.cn/638183/Pic/fj2.jpg" /><br>
- <img alt="" src="https://638183.freep.cn/638183/Pic/fj3.jpg" /><br>
- <img alt="" src="https://638183.freep.cn/638183/Pic/fj4.jpg" /><br>
- <img alt="" src="https://638183.freep.cn/638183/Pic/fj5.jpg" /><br>
- <img alt="" src="https://638183.freep.cn/638183/Pic/fj6.jpg" /><br>
- <img alt="" src="https://638183.freep.cn/638183/Pic/fj7.jpg" /><br>
- <img alt="" src="https://638183.freep.cn/638183/Pic/fj8.jpg" /><br>
- <img alt="" src="https://638183.freep.cn/638183/Pic/fj9.jpg" /><br>
- <img alt="" src="https://638183.freep.cn/638183/Pic/fj10.jpg" />
- </div>
- </div>
- <audio id="ktv" src="http://www.kumeiwp.com/sub/filestores/2021/12/30/45716ac7c13d7bfd471a155f0e3253cc.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>
复制代码
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|