当前位置：首页 > 编程资源 > 编程问答 >内容正文

编程问答

移动端banner css3(@keyframes )实现

发布时间：2025/3/21 编程问答 32 豆豆

生活随笔收集整理的这篇文章主要介绍了移动端banner css3(@keyframes )实现小编觉得挺不错的,现在分享给大家,帮大家做个参考.

2019独角兽企业重金招聘Python工程师标准>>>

这个是我用webpack时的生产文件部分，为了方便观看，在页面引入了less和vue的cdn，需要复制的话方便看

注：cssreset部分没有写进来

//文档结构，只看有用的部分即可

//html部分

<!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/main.css" rel="stylesheet"/><link href="less/home.less" rel="stylesheet/less"/><script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="home_banner" class="left0"><article ><a v-for="img in imgs" :_href="img.href" ><img :src="img.picture" /></a></article><ul><li v-for="img in imgs"><span></span></li></ul></div></body> </html>

//js部分

//移动端屏幕适配 let _screen = 750; let htmfontsi = document.body.clientWidth,_htmfontsize = parseFloat(htmfontsi)/_screen*100;document.getElementsByTagName("html")[0].style.fontSize=_htmfontsize+"px"; //home var home_banner=new Vue({el: "#home_banner",data:{imgs:[{href:"",picture:"img/huli_08.jpg"},{href:"",picture:"img/huli_08.jpg"},{href:"",picture:"img/huli_08.jpg"},{href:"",picture:"img/huli_08.jpg"}] } }) //behavior 行为 //自用事件封装 function on(argu, method, fun) {argu.addEventListener(method, fun); } //banner部分 let $home_banner=function(){if(home_banner.imgs.length>=2){let home_banner$ = document.getElementById("home_banner"),length = home_banner.imgs.length,len =length -1,arr = [];for( let i =0;i<length;i++){arr.push("left"+i)//从左向右滑动，class成组注意：i的数字代表当前动画的是第几个img} let move =function(){arr.push(arr[0]);arr.shift(arr[0]);home_banner$.setAttribute("class",arr[0])}let remove =function(){arr.unshift(arr[len]);arr.pop(arr[len]);let rearr = arr.join(".").replace(/left/g,"right").split(".");//从右向左滑动，class成组注意：left与right转换的时候，数字没有变化，动作开始时，新旧class的i值不变home_banner$.setAttribute("class",rearr[0]);} let moveto =setInterval(function(){move();},3000)let 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();

//less部分

@fff:#fff; @c3:#333; @c6:#666; @c9:#999; @df:#f3eeee; @d6:#d6d6d6; @e:#eee; @fe:#fe0000; //loop方法多层编译 .loop(@count)when(@count > 1){&.left@{count}{@_count:@count+1;article{a{&:nth-child(@{count}){z-index: 2;-webkit-animation:left_hide 0.3s forwards; }&:nth-child(@{_count}){z-index: 3;-webkit-animation:left_show 0.3s forwards; }}}ul{li{&:nth-child(@{count}){span{-webkit-animation:left_show 0.3s forwards; }}&:nth-child(@{_count}){span{-webkit-animation:left_hide 0.3s forwards; }}}}}&.right@{count}{@_count:@count+1;article{a{&:nth-child(@{count}){z-index: 2;-webkit-animation:right_hide 0.3s forwards; }&:nth-child(@{_count}){z-index: 3;-webkit-animation:right_show 0.3s forwards; }}}ul{li{&:nth-child(@{count}){span{-webkit-animation:right_show 0.3s forwards; }}&:nth-child(@{_count}){span{-webkit-animation:right_hide 0.3s forwards; }}}}}.loop((@count - 1)); } #home_banner{position: relative;float: left;width: 100%;overflow: hidden; .loop(10);//此处调用loop方法括号内的值为可实现效果的img的最大数量，可以根据img的数目更改//下面几个涉及 first-child 和last-child故而不写入loop中&.left0{article{a{&:last-child{z-index: 2;-webkit-animation:left_hide 0.3s forwards; }&:first-child{z-index: 3;-webkit-animation:left_show 0.3s forwards; }}}ul{li{&:last-child{span{-webkit-animation:left_show 0.3s forwards; }}&:first-child{span{-webkit-animation:left_hide 0.3s forwards; }}}}}&.left1{article{a{&:first-child{z-index: 2;-webkit-animation:left_hide 0.3s forwards; }&:nth-child(2){z-index: 3;-webkit-animation:left_show 0.3s forwards; }}}ul{li{&:first-child{span{-webkit-animation:left_show 0.3s forwards; }}&:nth-child(2){span{-webkit-animation:left_hide 0.3s forwards; }}}}}&.right0{article{a{&:last-child{z-index: 2;-webkit-animation:right_hide 0.3s forwards; }&:first-child{z-index: 3;-webkit-animation:right_show 0.3s forwards; }}}ul{li{&:last-child{span{-webkit-animation:right_show 0.3s forwards; }}&:first-child{span{-webkit-animation:right_hide 0.3s forwards; }}}}}&.right1{article{a{&:first-child{z-index: 2;-webkit-animation:right_hide 0.3s forwards; }&:nth-child(2){z-index: 3;-webkit-animation:right_show 0.3s forwards; }}}ul{li{&:first-child{span{-webkit-animation:right_show 0.3s forwards; }}&: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%);}}article{position: relative;width: 100%;height: 3.58rem;overflow: hidden;a{position: absolute;width: 100%;height: 100%;img{width: 100%;height: 100%;} }}ul{position: absolute;z-index: 3;bottom: 0.24rem;left: 50%;transform: translateX(-50%);display: table;li{position: relative;float: left;width: 0.22rem;height: 0.06rem;margin: 0 0.12rem;background-color: @fe;border-radius: 1rem ;box-shadow: rgba(71,63,64,0.75) 0 2px 2px;font-size: 0;overflow: hidden;span{display: block;width: 100%;height: 100%;background-color: @fff;}}} }

转载于:https://my.oschina.net/u/3797834/blog/1634765

总结

以上是生活随笔为你收集整理的移动端banner css3(@keyframes )实现的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。