图片滚动显示

用H5实现图片滚动显示像跑马灯一样的效果。

程序详解：
图片滚动的开始和停止
鼠标的放上和移走事件
无限循环
每次滚动速度的快慢

效果演示（图片自右向左滚动）

在这里插入图片描述

代码演示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style><style>*{padding: 0;margin: 0;}img{width: auto;height: 180px;}div{width: 1500px;height: 180px;margin: 100px auto;background-color: blanchedalmond;overflow: hidden;}div > ul{width: 200%;list-style: none;animation-name: move;/*速度*/animation-duration: 9s;/*无限循环*/animation-iteration-count: infinite;/*时间函数*/animation-timing-function: linear;}div > ul > li{width: auto;float: left;}div > ul >li > img{height: 100%;}/*鼠标上移，停止动画*/div:hover > ul{/*修改鼠标样式*/cursor: pointer;/*暂停*/animation-play-state: paused;}/*开始动画*/@keyframes move {from{transform: translateX(0);}to{transform: translateX(-1480px);}}</style></style><body><div><ul><li><img src="img/2.jpg" alt=""></li><li><img src="img/4.jpg" alt=""></li><li><img src="img/5.jpg" alt=""></li><li><img src="img/4.jpg" alt=""></li><li><img src="img/2.jpg" alt=""></li><li><img src="img/4.jpg" alt=""></li><li><img src="img/5.jpg" alt=""></li><li><img src="img/2.jpg" alt=""></li><li><img src="img/4.jpg" alt=""></li><li><img src="img/1.png" alt=""></li><li><img src="img/5.jpg" alt=""></li><li><img src="img/3.png" alt=""></li><li><img src="img/2.jpg" alt=""></li><li><img src="img/4.jpg" alt=""></li><li><img src="img/1.png" alt=""></li><li><img src="img/3.png" alt=""></li></ul></div></body>
</html>