苹果官网banner
程序员文章站
2024-03-25 13:04:22
...
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