移动端banner css3(@keyframes )实现

最新推荐文章于 2025-03-06 21:56:09 发布
最新推荐文章于 2025-03-06 21:56:09 发布
阅读量442 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： python javascript ViewUI
原文链接：https://my.oschina.net/u/3797834/blog/1634751
本文介绍了一种半JS半CSS3控制的轮播图实现方案，通过结合JavaScript与CSS3动画，实现了流畅的轮播效果，并支持触摸滑动切换图片，适用于移动端屏幕适配。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

工作近2年，对于banner的做法有了一些想法和实践，从最开始的全用js控制到后来的半JS半css控制动画，从开始的只为了实现功能到后来的逐渐优化，不管是代码逻辑还是性能，每次的改善能发现自己慢慢在进步。此次写这个文章，也是感觉这部分勉强能拿出手了吧。

注：此部分代码经过简化，原本是用vue+less写的，这个是编译后的文件，10张图片以下可以使用

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

//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/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部分

// 移动端屏幕适配  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部分  注：这里是内容部分，下面是cssreset

#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;
}

//cssreset

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;
}

 

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

CSS3动画热点图以及移动的背景制作.
Blog沙漏在下雨
03-25 731
CSS3热点图的制作，以及奔跑的熊。
使用html+css+js实现一个静态页面（含源码）
VX_WJ88950106的博客
08-15 1189
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站......
HTML5+原生javascript移动端滑动banner效果demo
03-09
HTML5+原生javascript移动端滑动banner效果demo
移动端banner css3(@keyframes )实现
weixin_34087301的博客
03-14 257
2019独角兽企业重金招聘Python工程师标准>>> ...
html+css实战134-搜索-布局和文本框
geyaoisnice的博客
06-17 196
html
移动端 图片切换 轮播（banner）
weixin_34187862的博客
04-08 673
发现一个很好用的jquery控件 操作很简单 1.引入css     &lt;link href="/Resources/style/swiper.min.css" rel="stylesheet" type="text/css" /&gt; 2.插入自定义样式 &lt;style&gt; .swiper-container { width: 100%; height: 100...
html中制作banner,css banner轮播图怎么做？
weixin_39519072的博客
06-11 1790
css banner轮播图怎么做？下面本篇文章给大家简单介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。初步了解动画效果吧。轮播图我一直以为靠jquery插件完成的，突然发现靠css也是可以实现的。我知道html有个marquee标签来实现文字滚动属性，当然也是能实现图片滚动的属性但效果不好，今天的这个高级一点。css属性#banner {height: 390px;ba...
进度条式banner焦点图设计与实现
CSS3的动画属性可以用来实现平滑的切换效果。例如，使用`@keyframes`定义动画，`animation`属性实现动画播放等。对于进度条样式的切换按钮，我们需要定义进度条的宽度、颜色、背景色等样式，并通过JavaScript动态...
Shopify模版定制: 纯CSS + Liquid 实现幻灯片功能（一） 之上下轮播
Shopify 开发者
04-05 1278
使用纯CSS解决各种问题，不仅能简化代码、还能优化网站加载和阻塞等，更是前端工程师能力的体现。下面将通过公告栏上线轮播的示例，详细讲解如何使用纯css + liquid 实现幻灯片功能（slide的内容可以替换成任何你想要的内容）。下篇文章将会还会为大家提供左右轮播的效果，后面还会写基于该功能写一个照片墙跑马灯滚动，同样也是纯CSS来实现。当然由于纯css没法监听滑动和点击等一些事件切换（滑动切换和点击切换按钮切换），这些只能通过js实现。不过可以做悬停暂停播放。来源我也不多说废话了，咱直接上代码。
CSS3多重背景结合动画打造会飘动的热气球banner
m0_71814235的博客
07-26 327
CSS3多重背景结合动画打造会飘动的热气球banner
CSS3遮罩banner动画.zip
07-04
CSS3遮罩banner动画
css3炫酷网站banner广告动画特效
12-13
这是一款使用纯css3制作的网站banner或广告动画特效。该banner动画特效利用CSS3 animations来完成，效果可以媲美flash动画或gif动画效果。
html5+css3响应式banner
09-30
html5+css3响应式banner 响应式宽屏BANNER
CSS3全屏banner幻灯片自动轮播动画切换代码.zip
07-04
一款基于jQuery CSS3实现的全屏banner幻灯片自动轮播动画切换代码特效。
会动的banner animate.css
08-06
animate.css banner图html css3
纯css3打造定时滚动效果banner及产品列表页
06-06 3247
纯css3打造定时滚动效果banner及产品列表页            标题           *{margin:0px; padding:0px;}   /*花花{身高：160cm; 体重：43kg;IQ:400;}*/   #top{width:100%; height:77px;background:#3e2b24; padding:17px 0
html广告条效果,css3炫酷网站banner广告动画特效
weixin_34283265的博客
06-04 407
这是一款可以用来遮罩网站banner或广告的动画特效插件。该特效使用的是 CSS3 animations。注意不是所有的浏览器都支持 CSS3 animations。如果你对 CSS3 animations还不了解，建议你先阅读W3C CSS Animations。HTMLhtml结构如下：Lost at sea?Relax - we've got your rudder.为了让你明白上面的Htm...
纯CSS3实现banner图片自动轮播效果方式总结
小菜鸡程序媛的挣扎史
08-01 8382
自动轮播： 实现切换图片，图片循环播放；鼠标悬停某张图片， 则暂停切换。 方法1、opacity控制透明度实现轮播效果 依照需求我们选择用CSS3的animation动画进行实现；transition动画需要触发才能启动， 所以我们选择自动触发的animation属性； 思路就是：将三个图片进行绝对定位重叠之后，将三个图片的动画放在一条时间轴上，分别在不同时间点控制透明度，在样式代...
CSS 中的 Banner 区域：设计与实现详解
最新发布
m0_62599305的博客
03-06 1083
通过上述的详细介绍，您可以看到，CSS 可以非常轻松地帮助我们实现一个响应式、动态、引人注目的 Banner 区域。一个设计得当的 Banner 不仅能增强网站的视觉效果，还能提高用户的点击率和参与度。在实际应用中，根据需求选择合适的布局、背景和动效，能让你的 Banner 区域脱颖而出！🌟试着根据上面的技巧，给你的网站设计一个引人注目的 Banner吧！🎉。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值