苹果官网banner

最新推荐文章于 2022-12-12 11:17:48 发布
最新推荐文章于 2022-12-12 11:17:48 发布
阅读量741 收藏 1
点赞数
分类专栏： CSS 文章标签： 轮播
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangzongyang1025_/article/details/88047173
版权 
meta charset="UTF-8">
<title>苹果的banner</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/idangerous.swiper.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="apple-banner">
	<div class="swiper-container">
		<a class="arrow-left" href="#"><span></span></a>
		<a class="arrow-right" href="#"><span></span></a>
		<div class="swiper-wrapper">
			<div class="swiper-slide slide1">
				<div class="title txt">
            iPhone
					<br>
            7  在此
				</div>
			</div>
			<div class="swiper-slide slide2">
				<div class="title txt">
					<img src="img/logo_watch_large.png">
				</div>
				<h2 class="homepage-headline txt">Series 2 新登场。</h2>
			</div>
			<div class="swiper-slide slide3">
				<div class="title txt">
					<img src="img/logo_macbookpro_large.png">
					<p>
						一身才华，一触即发
					</p>
				</div>
			</div>
		</div>
		<ul class="pagination autoplay">
			<li><span><i></i></span></li>
			<li><span><i></i></span></li>
			<li><span><i></i></span></li>
		</ul>
	</div>
</div>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/idangerous.swiper.min.js"></script>
<script src="js/idangerous.swiper.progress.min.js"></script>
<script src="js/apple.js"></script>
</body>
</html>

css

 @charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}

body {
	font-family: "microsoft yahei", Helvetica Neue, Helvetica, Arial, sans-serif;
	color: #333;
	padding: 0;
	margin: 0;
	font-size: 13px;
}

.apple-banner {
	width: 100%;
	height: 720px;
	overflow: hidden;
}

.swiper-container {
	margin-top: -40px;
	width: 100%;
	height: 800px;
}

.arrow-left {
	position: absolute;
	left: 0px;
	top: 0;
	width: 15%;
	height: 100%;
	z-index: 999;
}

.arrow-left span {
	margin-top: -32px;
	display: block;
	left: 20px;
	top: 50%;
	position: absolute;
	width: 64px;
	height: 64px;
	border-radius: 100%;
	background: rgba(180,180,180,0.25) url(../img/arrows.png) no-repeat center 17px;
	opacity: 0;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}

.arrow-left:hover span {
	opacity: .6;
}

.arrow-right {
	position: absolute;
	right: 0px;
	top: 0;
	width: 15%;
	height: 100%;
	z-index: 999;
}

.arrow-right span {
	margin-top: -32px;
	display: block;
	right: 20px;
	top: 50%;
	position: absolute;
	width: 64px;
	height: 64px;
	border-radius: 100%;
	background: rgba(180,180,180,0.25) url(../img/arrows.png) no-repeat center -71px;
	opacity: 0;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}

.arrow-right:hover span {
	opacity: .6;
}

.pagination {
	position: absolute;
	left: 0;
	text-align: center;
	bottom: 50px;
	width: 100%;
}

.pagination li {
	display: inline-block;
	width: 50px;
	height: 30px;
	margin: 0 3px;
	cursor: pointer;
}

.pagination li span {
	width: 50px;
	height: 2px;
	display: block;
	background: rgba(128,128,128,0.2);
}

.pagination li span i {
	background: gray;
	height: 2px;
	display: block;
	opacity: 0;
}

.pagination .current span i,.pagination .firstCurrent span i {
	transition: all .5s ease;
	opacity: 1;
}

.pagination .click span {
	background: gray;
}

.pagination .click span i {
	display: none;
}

.autoplay li span i {
	transform: scaleX(0);
	transform-origin: 0;
	opacity: 1;
}

.autoplay .firstCurrent span i {
	transform: scaleX(1);
	transition: all 3s linear;
}

.autoplay .current span i {
	transform: scaleX(1);
	transition: all 4s linear;
}

.autoplay .replace span {
	background: gray;
}

.autoplay .replace span i {
	transform: scaleX(0);
}
/*内容样式*/

.slide1 {
	background: #000 url(../img/iphone_large.jpg) no-repeat 50% 10%;
	background-size: auto 100%;
}

.slide1 .title {
	text-align: center;
	margin-top: 100px;
	font-size: 30px;
	font-weight: normal;
	color: #fff;
}

.slide2 {
	background: #f3f3f3 url(../img/watch_alt_large.jpg) no-repeat center 50%;
	background-size: auto 100%;
}

.slide2 .title {
	padding-top: 100px;
	text-align: center;
}

.slide2 h2 {
	bottom: 100px;
	text-align: center;
	font-size: 30px;
	font-weight: normal;
	position: absolute;
	width: 100%;
}

.slide3 {
	background: #fff url(../img/macbookpro_large.jpg) no-repeat center 110%;
	background-size: auto 70%;
}

.slide3 .title {
	text-align: center;
	margin-top: 100px;
	font-size: 40px;
	font-weight: normal;
}

idangerous.swiper.css

/*
 * Swiper 2.7.6
 * Mobile touch slider and framework with hardware accelerated transitions
 *
 * http://www.idangero.us/sliders/swiper/
 *
 * Copyright 2010-2015, Vladimir Kharlampidi
 * The iDangero.us
 * http://www.idangero.us/
 *
 * Licensed under GPL & MIT
 *
 * Released on: February 11, 2015
*/
/* ===============================================================
Basic Swiper Styles 
================================================================*/
.swiper-container {
	margin:0 auto;
	position:relative;
	overflow:hidden;
	direction:ltr;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	backface-visibility:hidden;
	/* Fix of Webkit flickering */
	z-index:1;
}
.swiper-wrapper {
	position:relative;
	width:100%;
	-webkit-transition-property:-webkit-transform, left, top;
	-webkit-transition-duration:0s;
	-webkit-transform:translate3d(0px,0,0);
	-webkit-transition-timing-function:ease;
	
	-moz-transition-property:-moz-transform, left, top;
	-moz-transition-duration:0s;
	-moz-transform:translate3d(0px,0,0);
	-moz-transition-timing-function:ease;
	
	-o-transition-property:-o-transform, left, top;
	-o-transition-duration:0s;
	-o-transform:translate3d(0px,0,0);
	-o-transition-timing-function:ease;
	-o-transform:translate(0px,0px);
	
	-ms-transition-property:-ms-transform, left, top;
	-ms-transition-duration:0s;
	-ms-transform:translate3d(0px,0,0);
	-ms-transition-timing-function:ease;
	
	transition-property:transform, left, top;
	transition-duration:0s;
	transform:translate3d(0px,0,0);
	transition-timing-function:ease;

	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
.swiper-free-mode > .swiper-wrapper {
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	margin: 0 auto;
}
.swiper-slide {
	float: left;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
	-ms-touch-action: pan-y;
}
.swiper-wp8-vertical {
	-ms-touch-action: pan-x;
}

/* ===============================================================
Your custom styles, here you need to specify container's and slide's
sizes, pagination, etc.
================================================================*/
.swiper-container {
	/* Specify Swiper's Size: */

	/*width:200px;
	height: 100px;*/
}
.swiper-slide {
	/* Specify Slides's Size: */
	
	/*width: 100%;
	height: 100%;*/
}
.swiper-slide-active {
	/* Specific active slide styling: */
	
}
.swiper-slide-visible {
	/* Specific visible slide styling: */	

}
/* ===============================================================
Pagination Styles
================================================================*/
.swiper-pagination-switch {
	/* Stylize pagination button: */	

}
.swiper-active-switch {
	/* Specific active button style: */	
	
}
.swiper-visible-switch {
	/* Specific visible button style: */	
	
}

apple.js

// JavaScript Document
autoplay=true;
var mySwiper = new Swiper('.swiper-container', {
	autoplay: 3000,
	progress: true,
	speed: 1000,
	paginationClickable: true,
	loop: true,
	onProgressChange: function(swiper) {
		for (var i = 0; i < swiper.slides.length; i++) {
			var slide = swiper.slides[i];
			var progress = slide.progress;
			var translate;
			if (progress > 0) {
				translate = progress * 0.9 * swiper.width;
				scale = 1 - progress * 0.1
				if (progress > 1) {
					scale = 0.9
				}
				txtPositionX = 0
				txtPositionY = progress * 30 + 'px'

			} else {
				translate = 0;
				scale = 1
				txtPositionX = -progress * 1000 + 'px'
				txtPositionY = 0
			}

			var txts = slide.querySelectorAll('.txt');
			for (var j = 0; j < txts.length; j++) {
				swiper.setTransform(txts[j], 'translate3d(' + txtPositionX + ',' + txtPositionY + ',0)');
			}
			swiper.setTransform(slide, 'translate3d(' + (translate) + 'px,0,0) scale(' + scale + ')');

		}
	},
	onTouchStart: function(swiper) {
		for (var i = 0; i < swiper.slides.length; i++) {
			swiper.setTransition(swiper.slides[i], 0);
			var txts = swiper.slides[i].querySelectorAll('.txt');
			for (var j = 0; j < txts.length; j++) {
				swiper.setTransition(txts[j], 0);
			}
		}
	},
	onSetWrapperTransition: function(swiper, speed) {
		for (var i = 0; i < swiper.slides.length; i++) {
			swiper.setTransition(swiper.slides[i], speed);
			var txts = swiper.slides[i].querySelectorAll('.txt');
			for (var j = 0; j < txts.length; j++) {
				swiper.setTransition(txts[j], speed);
			}
		}
	},
	onSlideChangeStart: function(swiper) {
		if (autoplay) {
			if (swiper.activeLoopIndex == 0) {
				$('.pagination li').removeClass('current');
				$('.pagination li').eq(0).removeClass('replace');
			}
			if (swiper.activeLoopIndex == 1) {
				$('.pagination li').eq(0).removeClass('firstCurrent current').addClass('replace')
			}
			$('.pagination li').eq(swiper.activeLoopIndex).addClass('current');
		} else {
			$('.pagination li').removeClass('current firstCurrent click');
			$('.pagination li').eq(swiper.activeLoopIndex).addClass('current');
		}

	},
	onFirstInit: function(swiper) {
		$('.pagination li').eq(0).addClass('firstCurrent');
	},

	onAutoplayStop: function() {
		autoplay=false;
		$('.autoplay').removeClass('autoplay');
	},
})

// Set Z-Indexes
for (var i = 0; i < mySwiper.slides.length; i++) {
	mySwiper.slides[i].style.zIndex = i;
}

$('.arrow-left').on('click', function(e) {
	e.preventDefault()
	mySwiper.swipePrev()
})
$('.arrow-right').on('click', function(e) {
	e.preventDefault()
	mySwiper.swipeNext()
})
$(".pagination li").on('touchstart mousedown', function(e) {
	e.preventDefault()
	if (autoplay) {
		autoplay=false;
		mySwiper.stopAutoplay();
		$(this).addClass('click');
	}

	mySwiper.swipeTo($(this).index())
})
window.onresize = function() {
	mySwiper.reInit();
}

idangerous.swiper.progress.min.js

/*
 * Swiper Smooth Progress 1.1.0
 * Smooth progress plugin for Swiper
 *
 * http://www.idangero.us/sliders/swiper/plugins/progress.php
 *
 * Copyright 2010-2014, Vladimir Kharlampidi
 * The iDangero.us
 * http://www.idangero.us/
 *
 * Licensed under GPL & MIT
 *
 * Released on: January 29, 2014
*/
Swiper.prototype.plugins.progress=function(a){function b(){for(var b=0;b<a.slides.length;b++){var c=a.slides[b];c.progressSlideSize=e?a.h.getWidth(c):a.h.getHeight(c),c.progressSlideOffset="offsetLeft"in c?e?c.offsetLeft:c.offsetTop:e?c.getOffset().left-a.h.getOffset(a.container).left:c.getOffset().top-a.h.getOffset(a.container).top}d=e?a.h.getWidth(a.wrapper)+a.wrapperLeft+a.wrapperRight-a.width:a.h.getHeight(a.wrapper)+a.wrapperTop+a.wrapperBottom-a.height}function c(b){var c,b=b||{x:0,y:0,z:0};c=1==a.params.centeredSlides?e?-b.x+a.width/2:-b.y+a.height/2:e?-b.x:-b.y;for(var f=0;f<a.slides.length;f++){var g=a.slides[f],h=1==a.params.centeredSlides?g.progressSlideSize/2:0,i=(c-g.progressSlideOffset-h)/g.progressSlideSize;g.progress=i}a.progress=e?-b.x/d:-b.y/d,a.params.onProgressChange&&a.fireCallback(a.params.onProgressChange,a)}var d,e="horizontal"==a.params.mode,f={onFirstInit:function(){b(),c({x:a.getWrapperTranslate("x"),y:a.getWrapperTranslate("y")})},onInit:function(){b()},onSetWrapperTransform:function(a){c(a)}};return f};

引入jquery.js
月落星河°
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
苹果官网轮播图
02-28
苹果banner炫酷的轮播图，效果非常好，实用swiper3...
JavaScript资源大全中文版（Awesome最新版）
学习笔记
03-16 3918
Awesome系列的JavaScript资源整理。awesome-javascript是sorrycc发起维护的 JS 资源列表，内容包括：包管理器、加载器、测试框架、运行器、QA、MVC框架和库、模板引擎、数据可视化、时间轴、编辑器等。 前端MVC框架与库 angular.js - 前端MVVM框架，支持双向绑定，实现MVC架构，增强Web应用 aurelia - A Javascri
完整HTML实例网页代码（4）
I心暖存人T的博客
04-21 2万+
上接完整HTML实例网页代码（3）的js格式代码 3>新建一个名为swiper.min.js的动画格式文件 代码：/** * Swiper 4.5.0 * Most modern mobile touch slider and framework with hardware accelerated transitions * http://www.idangero.us/swipe...
swiper横向轮播（兼容IE8）
weixin_30520015的博客
12-20 516
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="idangerous.swiper.css"/> ...
左滑切换页面
冉然的博客
06-12 1350
其中引入的工具类  即swiper.min.css 和 swiper.min.js 在下面的代码中,直接粘贴即可,query.min.js自己在网上找个引用就可以 -------------------------------------------*********************.html中代码**********************---------------------
基于vue模仿苹果官网的banner图
weixin_43929450的博客
12-12 857
基于vue模仿苹果官网的banner 图
实践任务：项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
weixin_67632468的博客
11-05 903
实践任务：项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
苹果官网首页左右全屏banner焦点图
06-12
左右全屏，效果简洁漂亮 大部分内容远程调用苹果官网，包括JS，图片，CSS样式等 本站只提供欣赏渠道，版权归苹果所有
swiper 之常见的 banner 轮播图效果
夜阑珊妖妖
11-06 1837
html <div class="bannersw swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="img/banner01.jpg" alt=""> </div> ...
旅游景点官网banner动画
07-24
旅游景点官网banner动画是一款卡通矢量旅游景点官方网站横幅动画下载。
使用swiper插件，实现轮播效果，banner自适应各种屏幕和手机大小
08-02
使用swiper插件，实现轮播效果，banner自适应各种屏幕和手机大小
jquery苹果IOS滑块banner焦点图特效
07-20
jquery苹果IOS滑块banner焦点图特效
百度+官网BANNER
01-04
百度+官网BANNER百度+官网BANNER百度+官网BANNER百度+官网BANNER百度+官网BANNER
banner.txt
09-04
我们只需要在Spring Boot工程的/src/main/resources目录下创建一个banner.txt文件，用这个替换，即可更换Spring默认的问候语了。（经过测试，CSDN会主动把我的资源从0积分下载变成40积分）
前端css样式小圆点样式
热门推荐
月落星河
02-21 2万+
:before和:after的使用方法
月落星河
05-22 1万+
伪元素可以让我们很方便的加入一个样式，比如在字体前加一个icon，或者加一个下换线，可以不占一个元素的位置，使用起来也很方便，现在介绍一下使用的方法。 注意：:before和:after中的content是必加项 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
文字文本超出自动换行
月落星河
03-01 4842
position: absolute; text-overflow:ellipsis; word-wrap:break-word
jquery实现进度条状态展示
月落星河
05-06 2986
如上图所示，由于项目需要，需要做一个状态展示，当点击的时候填满整个长度，你需要下载jquery，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi...
实现 select 下拉框第一个数据颜色显示
月落星河
07-22 2035
在实际项目开发的时候，可能需要使用下拉框，第一个选择的样式为灰色 类似于这样的效果，为了区分，所以我用了红色 .select { color: #ccc; } option { color: red } <select class="select"> ...
banner html
最新发布
12-07
根据提供的引用内容，可以了解到制作网页中的banner图是一个重要的部分。下面是一个简单的HTML和CSS代码示例，可以用于制作一个基本的banner图： ```html <!DOCTYPE html> <title>Banner HTML Example</title> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

月落星河°

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值