移動端banner css3(@keyframes )實現

時間  2019-11-11
標籤 移動 banner css3 css 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;
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程