css3轮播图实现代码

之前公式有一个小的case，文字轮播，鼠标移入后轮播暂停，移除后轮播继续，考虑用js写，但想到c3动画api：animation可以实现，就利用它来实现，不需要js哦。

首先还是介绍一下animation吧。

基础用法（详见w3c）：

下面开始代码实现步骤

 

1，轮播图的实现原理如图（渣渣美术手感，谢绝吐槽─━ _ ─━）

　　html元素构建结构类似这样

<div>

　　<ul>

　　　　<li>1</li>

　　　　<li>2</li>

　　　　<li>3</li>

　　　　<li>1</li>

　　</ul>

</div>

 如图，设置每个li标签的宽高和显示元素<div>相同，这时候会发现ul的长度会超过div,再利用css属性中overflow：hidden，（内容会被修剪，并且其余内容是不可见的）。他会隐藏掉多余的部分，这样：

这是后你移动ul,就会产生图片移动的轮播效果

好，下面我们进入代码编写模块。

首先根据 animation的设置，写一个

@keyframes 

 

@keyframes imgMove {

　　from {

　　　　transform: translateX(0px);

　　}

　　to {

　　　　transform: translateX(-882px);

　　}

}

这里可以看到，我是利用transform: translateX( )来控制他的位移的，

 

然后是animation 的编写

 

　　animation: imgMove 5s linear infinite;

介绍一下设置

 

　　1-  animation-name  执行动画的名称imgMove

　　2-animation-duration  完成动画的时间5s

　　3-animation-timing-function 完成动画是的速度   linear -匀速

　　4-animation-iteration-count  播放的次数  infinite-无限次播放 

 

　　最后是实现鼠标移入动画暂停，这里有两个介绍：

　　1· :hover{}定义鼠标移入触发的事件

　　2·animation-play-state:paused/running  动画的暂停与播放

 

　　下面是完整代码，使用时需要添加图片，各位自己添加哈

　　

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 882px;
height: 86px;
margin: 200px auto;
overflow: hidden;
}
div > ul {
/*设置ul的宽度为2倍div的宽度*/
width: 200%;
list-style: none;
/*动画属性*/
animation: imgMove 5s linear infinite;

}
/* 暂停动画 */
div>ul:hover{
animation-play-state: paused;
}

div > ul > li {
width: 126px;
float: left;
}

div img {
width: 100%;
}
/*创建动画*/
@keyframes imgMove {
from {
transform: translateX(0px);
}
to {
transform: translateX(-882px);
}
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="images/1.jpg" alt=""/></li>
<li><img src="images/2.jpg" alt=""/></li>
<li><img src="images/3.jpg" alt=""/></li>
<li><img src="images/4.jpg" alt=""/></li>
<li><img src="images/5.jpg" alt=""/></li>
<li><img src="images/6.jpg" alt=""/></li>
<li><img src="images/7.jpg" alt=""/></li>
<!--将需要轮播的图片在复制一份-->
<li><img src="images/1.jpg" alt=""/></li>
<li><img src="images/2.jpg" alt=""/></li>
<li><img src="images/3.jpg" alt=""/></li>
<li><img src="images/4.jpg" alt=""/></li>
<li><img src="images/5.jpg" alt=""/></li>
<li><img src="images/6.jpg" alt=""/></li>
<li><img src="images/7.jpg" alt=""/></li>
</ul>
</div>
</body>
</html>

 

 

 

搞定 !