不能发视频,截图来代替吧
1.显示 轮播图1(实际轮播的第2个元素li)
2.显示 轮播图2(实际轮播的第3个元素li)
3.显示 轮播图3(实际轮播的第4个元素li)
4.显示 轮播图1(实际轮播的第5个元素li,之后会紧跟着重复以上动作)
<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<title>RunJS</title>
<style type="text/css">
#frame{position:absolutewidth:302pxheight:200pxoverflow:hiddenborder-radius:5px}
#dis{position:absoluteleft:-50pxtop:-10pxopacity:.5}
#dis li{display:inline-blockwidth:200pxheight:20pxmargin:0 50pxfloat:lefttext-align:centercolor:#fffborder-radius:10pxbackground:#000}
#photos .img{float:leftwidth:300pxheight:200pxbackground-color:redborder-left:1px solid blue}
#photos { position: absolutez-index:9 width: calc(301px * 4)/*---修改图片数量的话需要修改下面的动画参数*/ }
.play{ animation: ma 5s ease-out infinite alternate}
@keyframes ma {
0%,25% { margin-left: 0px }
30%,50% { margin-left: -300px }
55%,75% { margin-left: -600px }
80%,100% { margin-left: -900px }
}
</style>
</head>
<body>
<div id="frame" >
<div id="photos" class="play">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<ul id="dis">
<li>111111111111111</li>
<li>22222222222222</li>
<li>33333333333333</li>
<li>44444444444444</li>
</ul>
</div></div>
</body></html>
预览地址: 纯css3:radio+label实现轮播图
轮播图这东西,我相信只要是做前端的,肯定都做过,不过大部分应该都是用js来实现的,其实css3也是可以实现轮播图的,而且也可以加一些动画之类的,下边就分享下思路。声明,这里没有贬低 js 的意思,相反, js 能做的, css 基本做不到, css 能做的, js 基本能做到,这里纯粹就是为了分享 css 的一些运用。
css 里有个可以绑定到 <input>上的标签 <label>,它的功能就是当你点击所绑定的这个 <label>的时候,就可以选中相应的 <input>,既然有了这个功能,那就有了控制轮播图的方法了。
通过 css 可以看到,其实这个例子主要用到的就是 <input type="radio">的 :checked 伪类选择器然后通错 css3 的 :nth-of-type(n) 节点选择器控制与之相对应的轮播、按钮,整个例子也没什么难度,也就不废话了。