02-走马灯动画实现图片无缝展示

一：目标

实现走马灯效果，图片无缝衔接播放

二：实现思路

1.先写好个盒子，宽高边框（注意这里的盒子宽不能乱写，要刚好能放下整数张图片）

2.ul>li>a添加图片，再浮动、微调使图片排成一行，并把超出盒子部分进行隐藏（注意注意：ul>li>a要多加几张图片，加多少张看正好多少张能铺满盒子）

3.给ul添加动画，用transform: translateX();属性实现

4.用animation-play-state: paused;属性实现当鼠标移动到盒子时动画就暂停的效果

三：完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}li{list-style: none;}.box{width: 600px;height: 112px;border: 5px solid black;margin: 100px auto;overflow: hidden;}.box li img{width: 200px;}/* 让图片都能横着排在一行 */.box ul{width: 2000px;animation: move 5s infinite linear;}.box li {float: left; }/* 图片向左移动的动画 */@keyframes move{to{transform: translateX(-1400px);}}/* 实现鼠标hover就暂停动画 *//* 移动到hover就暂停，因为动画加在ul上所以ul变 */.box:hover ul{animation-play-state: paused;}</style>
</head>
<body><div class="box"><ul><li><a href="#"><img src="./1.jpg"></a></li><li><a href="#"><img src="./2.jpg"></a></li><li><a href="#"><img src="./3.jpg"></a></li><li><a href="#"><img src="./4.jpg"></a></li><li><a href="#"><img src="./5.jpg"></a></li><li><a href="#"><img src="./6.jpg"></a></li><li><a href="#"><img src="./7.jpg"></a></li><!-- 前三张图片刚好把盒子的空填满 --><li><a href="#"><img src="./1.jpg"></a></li><li><a href="#"><img src="./2.jpg"></a></li><li><a href="#"><img src="./3.jpg"></a></li></ul></div>
</body>
</html>

02-走马灯动画实现图片无缝展示相关推荐

jQuery动画实现图片无缝连续自动滚动
代码: <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8&q ...
html的动画效果实现无限轮播,jQuery动画效果实现图片无缝连续滚动
本文实例介绍了jQuery动画效果实现图片无缝连续滚动的详细代码,分享给大家供大家参考,具体内容如下效果图如下: 一.HTML代码 1. id为container的div是最外层的包装,用来控制滚动 ...
JQuery控制图片无缝滚动
经常有人问怎么在HTML上制作图片的无缝滚动,我自己在一些项目中也会经常用到的,今天花了些时间,上网搜索了一下,下了些源码回来看了一下,发现都是只能在IE下能够滚动的,而且都是光<html> ...
zShowBox (图片放大展示jquery版兼容性好)
zShowBox : 图片放大展示简单舒服快速兼容性好 zShowBox.js /* * zShowBox (图片放大展示) */ function zShowBox(domChunk) ...
html首页 slider图片切换效果,jQuery插件Slider Revolution实现响应动画滑动图片切换效果...
jQuery插件Slider Revolution实现响应动画滑动图片切换效果 2018-12-31 编程之家 https://www.jb51.cc 这是一款非常强大的内容切换插件,它基于jQuer ...
[Android]使用ViewPager实现图片滑动展示
在淘宝等电商的APP首页经常能看到大幅的广告位,通常有多幅经常更新的图片用于展示促销信息,如下图所示: 通常会自动滚动,也可以根据手势滑动.我没有研究过人家的APP是通过什么实现的,可能有第三方已经封 ...
第41天：匀速、缓动运动和图片无缝滚动
一.匀速运动和缓动运动缓动运动公式:leader=leader+(target-leader)/10;//leader为初始值0,target为结束值,10可以改变,值越大,速度越慢 1 < ...
移动端h5游戏开发中的动画和动效展示
在移动端h5游戏开发中,经常会遇到动画和动效的展现需求,比较常用的实现方法有css3.svg.定时器等,针对不同的场景和需求使用不同的技术,可以提升设计和开发的效率,保证产品的效果和质量,也能让用户有 ...
JavaScript 图片滑动展示效果javascript
javascript 图片滑动展示效果更新版本:slideview 图片滑动(扩展/收缩)展示效果看到jquery实例:图片展示效果后,我也想拿来试试,但我不太喜欢用框架,所以自己做了个. 其中的 ...

02-走马灯动画实现图片无缝展示

02-走马灯动画实现图片无缝展示相关推荐

最新文章

热门文章

02-走马灯 动画实现图片无缝展示

02-走马灯 动画实现图片无缝展示相关推荐

最新文章

热门文章

02-走马灯动画实现图片无缝展示

02-走马灯动画实现图片无缝展示相关推荐