官网banner"/>
苹果官网banner
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** /** Copyright 2010-2015, Vladimir Kharlampidi* The 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.1if (progress > 1) {scale = 0.9}txtPositionX = 0txtPositionY = progress * 30 + 'px'} else {translate = 0;scale = 1txtPositionX = -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** .php** Copyright 2010-2014, Vladimir Kharlampidi* The 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
更多推荐
苹果官网banner
发布评论