之前写过两个懒人轮播，为啥叫懒人轮播呢？因为从轮播图的创建到开始轮播然后切换都是自动完成的，需要做的只是给它指定个位置，向对象init函数中传入些参数（图片长度，宽度，图片数量）即可。有点全自动洗衣机的即视感
，不过这样做有一个 缺点，就是dom操作太多，影响了性能。这次不一样了，用animation动画简单实现了个自动轮播，超级轻便呢（前提条件是已知图片张数，但 图片路径未知，就是说可以通过更改图片 路径从而更新页面图片），只是缺点更多了：
①不能切换，因为动画一直在运行，若设置动画暂停就一切都停止了。
②轮播一张图片之间的间隔无法控制。
③修改图片宽高需要修改动画帧移动参数@keyframes。
不过用animation实现一些小型的轮播还是非常棒的，性能极佳。顺便贴下代码和思路：
js代码：
var
demo = (
function(
document,
window) {
// 获取所需元素
var
ele = {
// 轮播所在容器
oWrapper:
document.
querySelector(
".wrapper"),
// 轮播ul
oUl:
document.
querySelector(
".wrapper-ul"),
// 轮播li
aLi:
document.
querySelectorAll(
".wrapper-ul li"),
// 所有图片img标签
aImg:
document.
querySelectorAll(
".wrapper-ul li img"),
}
// 设置轮播wrapper,ul宽高并把图片资源放入li中
function
setPlaying(
wid,
hei,
num,
imgs) {
ele.
oWrapper.
style.
width =
wid +
"px";
ele.
oWrapper.
style.
height =
hei +
"px";
ele.
oUl.
style.
width =
wid*
num +
"px";
ele.
oUl.
style.
height =
hei +
"px";
ele.
aLi.
forEach(
function(
value,
index,
arr) {
value.
style.
width =
wid +
"px";
value.
style.
height =
hei +
"px";
})
// 设置图片属性
ele.
aImg.
forEach(
function(
value,
index,
arr) {
value.
src =
imgs[
index].
url;
value.
alt =
imgs[
index].
alt;
value.
style.
width =
wid +
"px";
value.
style.
height =
hei +
"px";
})
}
var
run = {
// 默认图片宽度
imgW:
500,
// 默认图片高度
imgH:
500,
// 保存图片资源
imgs: [],
num:
ele.
aLi.
length,
init
:
function(
config) {
this.
imgW =
config.
imgW||
this.
imgW;
this.
imgH =
config.
imgH||
this.
imgH;
this.
imgs =
config.
imgs;
//设置wrapper,ul,li宽高
setPlaying(
this.
imgW,
this.
imgH,
this.
num,
this.
imgs);
}
}
return
run;
})(
document,
window);
html代码：
<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
link
rel=
"stylesheet"
href=
"lunbo.css"
>
<
title
>css3实现轮播
</
title
>
</
head
>
<
body
>
<
div
id=
"container"
>
<
ul
class=
"wrapper-ul"
>
<
li
><
img
src=
""
alt=
""
width=
""
height=
""
></
li
>
<
li
><
img
src=
""
alt=
""
width=
""
height=
""
></
li
>
<
li
><
img
src=
""
alt=
""
width=
""
height=
""
></
li
>
<
li
><
img
src=
""
alt=
""
width=
""
height=
""
></
li
>
<
li
><
img
src=
""
alt=
""
width=
""
height=
""
></
li
>
</
ul
>
</
div
>
</
div
>
<
script
src=
"lunbo.js"
>
<
/
script
>
<
script
>
demo.
init({
imgW:
400,
imgH:
200,
imgs:[
{
url:
"imgs/one.jpg",
alt:
"one",
width:
"300px",
height:
"180px"
},
{
url:
"imgs/two.jpg",
alt:
"two",
width:
"300px",
height:
"180px"
},
{
url:
"imgs/three.jpg",
alt:
"three",
width:
"300px",
height:
"180px"
},
{
url:
"imgs/four.jpg",
alt:
"four",
width:
"300px",
height:
"180px"
},
{
url:
"imgs/five.jpg",
alt:
"five",
width:
"300px",
height:
"180px"
}
]
})
<
/
script
>
</
body
>
</
html
@charset
"utf-8";
/* 样式初始化 */
html,body {
width:
100%;
height:
100%;
}
body ,ul {
margin:
0;
}
ul {
padding:
0;
}
ul {
list-style:
none;
}
/* container-start */
body {
background-color:
rgb(
1,
1,
21);
}
#container {
width:
100%;
height:
100%;
}
.wrapper {
position:
relative;
overflow:
hidden;
margin:
100px
auto;
cursor:
pointer;
}
.wrapper-ul {
position:
absolute;
left:
0;
top:
0;
font-size:
0;
animation: play
12s
infinite;
}
.wrapper-ul li {
display:
inline-block;
}
/*轮播动画 */
@keyframes
play {
0% {
transform:
translate(
0px);
}
20% {
transform:
translate(
-400px);
}
40% {
transform:
translate(
-800px);
}
60% {
transform:
translate(
-1200px);
}
80% {
transform:
translate(
-1600px);
}
100% {
transform:
translate(
0px);
}
}