移动端banner css3(@keyframes )实现
工做近2年，对于banner的作法有了一些想法和实践，从最开始的全用js控制到后来的半JS半css控制动画，从开始的只为了实现功能到后来的逐渐优化，无论是代码逻辑仍是性能，每次的改善能发现本身慢慢在进步。这次写这个文章，也是感受这部分勉强能拿出手了吧。javascript
注：此部分代码通过简化，本来是用vue+less写的，这个是编译后的文件，10张图片如下能够使用css
//文件结构 只看有用的部分便可html
//html 部分vue
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="shortcut icon" type="image/x-icon" href="" /> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"> <link href="css/home.css" rel="stylesheet"/> </head> <body> <div id="home_banner" class="left0"> <article > <a href=""><img src="img/huli_08.jpg" /></a> <a href=""><img src="img/huli_08.jpg" /></a> <a href=""><img src="img/huli_08.jpg" /></a> <a href=""><img src="img/huli_08.jpg" /></a> </article> <ul> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> </ul> </div> <script src="js/banner.js"></script> </body> </html>
//JS部分java
// 移动端屏幕适配 screen值
var _screen = 750;
var htmfontsi = document.body.clientWidth,
_htmfontsize = parseFloat(htmfontsi)/_screen*100;
document.getElementsByTagName("html")[0].style.fontSize=_htmfontsize+"px";
//behavior 行为
//自用事件封装
function on(argu, method, fun) {
argu.addEventListener(method, fun);
}
//banner部分
var $home_banner=function(){
var home_banner= document.getElementById("home_banner");
imgs =home_banner.getElementsByTagName("img");
if(imgs.length>=2){
var home_banner$ = document.getElementById("home_banner"),
length = imgs.length,
len =length -1,
arr = [];
for( var i =0;i<length;i++){
arr.push("left"+i)//从左向右滑动，class成组 注意：i的数字表明当前动画的是第几个img-1
}
var move =function(){
arr.push(arr[0]);
arr.shift(arr[0]);
home_banner$.setAttribute("class",arr[0])
}
var remove =function(){
arr.unshift(arr[len]);
arr.pop(arr[len]);
var rearr = arr.join(".").replace(/left/g,"right").split(".");
//从右向左滑动，class成组 注意：left与right转换的时候，数字没有变化，动做开始时，新旧class的i值不变
home_banner$.setAttribute("class",rearr[0]);
}
var moveto =setInterval(function(){
move();
},3000)
var xl,xr;
function touchstart() {
xl = event.changedTouches[0].clientX;
clearInterval(moveto);
};
function touchend() {
xr = event.changedTouches[0].clientX;
if (xr - xl < -50) {//向左滑动
remove();
}
else if (xr - xl > 50) {//向右滑动
move();
}
moveto =setInterval(function(){
move();
},3000)
};
on(home_banner$,"touchstart",function(event){
touchstart();
})
on(home_banner$,"touchend",function(event){
touchend();
})
}
};
$home_banner();
//css部分 注：这里是内容部分，下面是cssresetweb
#home_banner {
position: relative;
float: left;
width: 100%;
overflow: hidden;
}
#home_banner.left10 article a:nth-child(10) {
z-index: 2;
-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.left10 article a:nth-child(11) {
z-index: 3;
-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left10 ul li:nth-child(10) span {
-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left10 ul li:nth-child(11) span {
-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.right10 article a:nth-child(10) {
z-index: 2;
-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.right10 article a:nth-child(11) {
z-index: 3;
-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right10 ul li:nth-child(10) span {
-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right10 ul li:nth-child(11) span {
-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.left9 article a:nth-child(9) {
z-index: 2;
-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.left9 article a:nth-child(10) {
z-index: 3;
-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left9 ul li:nth-child(9) span {
-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left9 ul li:nth-child(10) span {
-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.right9 article a:nth-child(9) {
z-index: 2;
-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.right9 article a:nth-child(10) {
z-index: 3;
-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right9 ul li:nth-child(9) span {
-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right9 ul li:nth-child(10) span {
-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.left8 article a:nth-child(8) {
z-index: 2;
-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.left8 article a:nth-child(9) {
z-index: 3;
-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left8 ul li:nth-child(8) span {
-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left8 ul li:nth-child(9) span {
-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.right8 article a:nth-child(8) {
z-index: 2;
-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.right8 article a:nth-child(9) {
z-index: 3;
-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right8 ul li:nth-child(8) span {
-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right8 ul li:nth-child(9) span {
-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.left7 article a:nth-child(7) {
z-index: 2;
-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.left7 article a:nth-child(8) {
z-index: 3;
-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left7 ul li:nth-child(7) span {
-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left7 ul li:nth-child(8) span {
-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.right7 article a:nth-child(7) {
z-index: 2;
-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.right7 article a:nth-child(8) {
z-index: 3;
-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right7 ul li:nth-child(7) span {
-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right7 ul li:nth-child(8) span {
-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.left6 article a:nth-child(6) {
z-index: 2;
-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.left6 article a:nth-child(7) {
z-index: 3;
-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left6 ul li:nth-child(6) span {
-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left6 ul li:nth-child(7) span {
-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.right6 article a:nth-child(6) {
z-index: 2;
-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.right6 article a:nth-child(7) {
z-index: 3;
-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right6 ul li:nth-child(6) span {
-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right6 ul li:nth-child(7) span {
-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.left5 article a:nth-child(5) {
z-index: 2;
-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.left5 article a:nth-child(6) {
z-index: 3;
-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left5 ul li:nth-child(5) span {
-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left5 ul li:nth-child(6) span {
-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.right5 article a:nth-child(5) {
z-index: 2;
-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.right5 article a:nth-child(6) {
z-index: 3;
-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right5 ul li:nth-child(5) span {
-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right5 ul li:nth-child(6) span {
-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.left4 article a:nth-child(4) {
z-index: 2;
-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.left4 article a:nth-child(5) {
z-index: 3;
-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left4 ul li:nth-child(4) span {
-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left4 ul li:nth-child(5) span {
-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.right4 article a:nth-child(4) {
z-index: 2;
-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.right4 article a:nth-child(5) {
z-index: 3;
-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right4 ul li:nth-child(4) span {
-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right4 ul li:nth-child(5) span {
-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.left3 article a:nth-child(3) {
z-index: 2;
-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.left3 article a:nth-child(4) {
z-index: 3;
-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left3 ul li:nth-child(3) span {
-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left3 ul li:nth-child(4) span {
-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.right3 article a:nth-child(3) {
z-index: 2;
-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.right3 article a:nth-child(4) {
z-index: 3;
-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right3 ul li:nth-child(3) span {
-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right3 ul li:nth-child(4) span {
-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.left2 article a:nth-child(2) {
z-index: 2;
-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.left2 article a:nth-child(3) {
z-index: 3;
-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left2 ul li:nth-child(2) span {
-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left2 ul li:nth-child(3) span {
-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.right2 article a:nth-child(2) {
z-index: 2;
-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.right2 article a:nth-child(3) {
z-index: 3;
-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right2 ul li:nth-child(2) span {
-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right2 ul li:nth-child(3) span {
-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.left0 article a:last-child {
z-index: 2;
-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.left0 article a:first-child {
z-index: 3;
-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left0 ul li:last-child span {
-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left0 ul li:first-child span {
-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.left1 article a:first-child {
z-index: 2;
-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.left1 article a:nth-child(2) {
z-index: 3;
-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left1 ul li:first-child span {
-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left1 ul li:nth-child(2) span {
-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.right0 article a:last-child {
z-index: 2;
-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.right0 article a:first-child {
z-index: 3;
-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right0 ul li:last-child span {
-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right0 ul li:first-child span {
-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.right1 article a:first-child {
z-index: 2;
-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.right1 article a:nth-child(2) {
z-index: 3;
-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right1 ul li:first-child span {
-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right1 ul li:nth-child(2) span {
-webkit-animation: right_hide 0.3s forwards;
}
@keyframes left_show {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
@keyframes right_show {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
@keyframes left_hide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
@keyframes right_hide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
#home_banner article {
position: relative;
width: 100%;
height: 3.58rem;
overflow: hidden;
}
#home_banner article a {
position: absolute;
width: 100%;
height: 100%;
}
#home_banner article a img {
width: 100%;
height: 100%;
}
#home_banner ul {
position: absolute;
z-index: 3;
bottom: 0.24rem;
left: 50%;
transform: translateX(-50%);
display: table;
}
#home_banner ul li {
position: relative;
float: left;
width: 0.22rem;
height: 0.06rem;
margin: 0 0.12rem;
background-color: #fe0000;
border-radius: 1rem ;
box-shadow: rgba(71, 63, 64, 0.75) 0 2px 2px;
font-size: 0;
overflow: hidden;
}
#home_banner ul li span {
display: block;
width: 100%;
height: 100%;
background-color: #fff;
}
//cssresetless
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td,
select,
img {
margin: 0;
padding: 0;
}
input,
button,
textarea,
img {
outline: none;
}
button {
border: none;
background-color: rgba(0, 0, 0, 0);
}
img {
border: none;
}
a,
a:hover,
a:focus {
text-decoration: none;
}
div {
-webkit-text-size-adjust: none;
}
li {
list-style: none;
}
html {
font-size: 16px;
text-size-adjust: none;
}
body {
font-family: "\5FAE\8F6F\96C5\9ED1";
font-size: 0.3rem;
}
相关文章
- 1. 移动端banner css3(@keyframes )实现
- 2. 【css3】CSS3动画（animation @keyframes）
- 3. CSS3 动画关键帧 @keyframes
- 4. @-webkit-keyframes myfirst 动画 css3
- 5. css3 keyframes 实现无限旋转360度
- 6. CSS3 @keyframes 语法
- 7. css3中的 @Keyframes
- 8. CSS3 @keyframes animate
- 9. css3实现左右移动
- 10. CSS3 @keyframes 规则（1）
- 更多相关文章...
- • 移动设备 统计 - 浏览器信息
- • Hibernate实现增删改查 - Hibernate教程
- • ☆基于Java Instrument的Agent实现
- • Spring Cloud 微服务实战(三) - 服务注册与发现
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
