swiper及实例-手机幻灯片/手机整屏滚动

swiper

swiper.js是一款成熟稳定的应用于PC端和移动端的滑动效果插件，一般用来触屏焦点图、触屏整屏滚动等效果。 swiper分为2.x版本和3.x版本，2.x版本支持低版本浏览器(IE7)，3.x放弃支持低版本浏览器，适合应用在移动端。

2.x版本中文网址：http://2.swiper.com.cn/
3.x版本中文网地址：http://www.swiper.com.cn/

swiper使用方法：

<script type="text/javascript" src="js/swiper.min.js"></script>
......

<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
......

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

<script> 
var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
  prevButton: '.swiper-button-prev',
  nextButton: '.swiper-button-next',
    initialSlide :1,
  paginationClickable: true,
  loop: true,
  autoplay:3000,
  autoplayDisableOnInteraction:false
});
</script>

swiper使用参数：

1、initialSlide：初始索引值，从0开始
2、direction：滑动方向 horizontal | vertical
3、speed：滑动速度，单位ms
4、autoplay：设置自动播放及播放时间
5、autoplayDisableOnInteraction：用户操作swipe后是否还自动播放，默认是true，不再自动播放
6、pagination：分页圆点
7、paginationClickable：分页圆点是否点击
8、prevButton：上一页箭头
9、nextButton：下一页箭头
10、loop：是否首尾衔接
11、onSlideChangeEnd：回调函数，滑动结束时执行

--------------------------------------------------------手机幻灯片----------------------------------------------

 1 /* 将标签默认的间距设置为0 */
 2 body,p,h1,h2,h3,h4,h5,h6,ul,dl,dd,input,form,select{
 3     margin:0;
 4     padding:0;
 5 }
 6 
 7 /* 让h标签继承body内设置的字体大小 */
 8 h1,h2,h3,h4,h5,h6{
 9     font-size:100%;
10 }
11 
12 /* 去掉默认的项目图标 */
13 ul{
14     list-style:none;
15 }
16 
17 a{
18     text-decoration:none;
19 }
20 
21 em{
22     font-style:normal;
23 }
24 
25 /* 去掉IE下，图片做链接时产生的边框 */
26 img{
27     border:none;
28 }
29 
30 /* 清除margin-top塌陷和清除浮动 */
31 .clearfix:before,.clearfix:after{
32     content:"";
33     display:table;
34 }
35 .clearfix:after{
36     clear:both;
37 }
38 .clearfix{
39     zoom:1;
40 }
41 
42 /* 浮动 */
43 .fl{
44     float:left;
45 }
46 
47 .fr{
48     float:right;
49 }

reset.css

 1 /**
 2  * Swiper 3.4.0
 3  * Most modern mobile touch slider and framework with hardware accelerated transitions
 4  * 
 5  * http://www.idangero.us/swiper/
 6  * 
 7  * Copyright 2016, Vladimir Kharlampidi
 8  * The iDangero.us
 9  * http://www.idangero.us/
10  * 
11  * Licensed under MIT
12  * 
13  * Released on: October 16, 2016
14  */
15 .swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-moz-box-orient:vertical;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate(0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{-webkit-box-lines:multiple;-moz-box-lines:multiple;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}.swiper-container-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{-webkit-flex-shrink:0;-ms-flex:0 0 auto;flex-shrink:0;width:100%;height:100%;position:relative}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-ms-flex-align:start;-webkit-align-items:flex-start;align-items:flex-start;-webkit-transition-property:-webkit-transform,height;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform,height}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-wp8-horizontal{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-wp8-vertical{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;-moz-background-size:27px 44px;-webkit-background-size:27px 44px;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-moz-appearance:none;-ms-appearance:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-white .swiper-pagination-bullet{background:#fff}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-o-transform:translate(0,-50%);-ms-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:5px 0;display:block}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 5px}.swiper-pagination-progress{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progress .swiper-pagination-progressbar{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;-moz-transform-origin:left top;-ms-transform-origin:left top;-o-transform-origin:left top;transform-origin:left top}.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar{-webkit-transform-origin:right top;-moz-transform-origin:right top;-ms-transform-origin:right top;-o-transform-origin:right top;transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progress{width:100%;height:4px;left:0;top:0}.swiper-container-vertical>.swiper-pagination-progress{width:4px;height:100%;left:0;top:0}.swiper-pagination-progress.swiper-pagination-white{background:rgba(255,255,255,.5)}.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar{background:#fff}.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar{background:#000}.swiper-container-3d{-webkit-perspective:1200px;-moz-perspective:1200px;-o-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-coverflow .swiper-wrapper,.swiper-container-flip .swiper-wrapper{-ms-perspective:1200px}.swiper-container-cube,.swiper-container-flip{overflow:visible}.swiper-container-cube .swiper-slide,.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-cube .swiper-slide .swiper-slide,.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active,.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top,.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-slide{visibility:hidden;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;-moz-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-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}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-moz-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-zoom-container{width:100%;height:100%;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;-moz-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;-moz-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:"";width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;-webkit-background-size:100%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}

swiper.min.css

  1 /* em布局，各尺寸=px/20 */
  2 
  3 .main_wrap{
  4     position:absolute;  /*为了避免在微信出问题，所以才用了绝对定位而不是固定定位*/
  5     top:0;
  6     right:0;
  7     bottom:0;
  8     left:0;
  9 }
 10 
 11 .header{
 12     height:2.5rem;
 13     background-color:#37ab40;
 14     position:relative;
 15 }
 16 
 17 .header .logo{
 18     display:block;   /*为了宽和高生效，将a标签转为块元素*/
 19     width:4.45rem;
 20     height:1.8rem;
 21     margin:0.35rem auto 0;
 22 }
 23 
 24 .header .logo img{
 25     width:100%;  /*继承logo的宽度，高度自动也压缩了*/
 26 }
 27 
 28 .header .search{
 29     position:absolute;
 30     width:1.35rem;  /*必须设置宽高，不然背景图撑不开宽高*/
 31     height:1.35rem;
 32     right:0.75rem;
 33     top:0.625rem;
 34     background:url(../images/icons.png) left top no-repeat;
 35     background-size:3rem 42rem;  /*将雪碧图压缩*/
 36 }
 37 
 38 
 39 /* ---------------------------------------------*/
 40 .center_wrap{
 41     position:absolute;
 42     top:2.5rem;
 43     bottom:2.5rem;
 44     left:0;
 45     right:0;
 46     background-color:#efefef;
 47 
 48     overflow-x:hidden;
 49     overflow-y:auto;     /* 下拉滚动条，overflow-y必须加在父容器上。且必须指定子元素div的高度才能生效，<div class="center_wrap"><div style="height:1500px;width:200px;>fff</div></div>*/
 50 }
 51 
 52 
 53 /* -----------*/
 54 .center_wrap .slide img{
 55     width:100%;   /* slide和img都继承了center_wrap的宽度 */
 56 }
 57 
 58 /* -----------*/
 59 .menu_con{
 60     height:9.25rem;
 61     background-color:#fff;
 62     margin-top:0.5rem;
 63     overflow:hidden;
 64 }
 65 
 66 .menu{
 67     width:19rem;
 68     height:8.1rem;
 69     margin:0.7rem 0 0 1.375rem;
 70     /*background-color:gold;*/
 71 }
 72 
 73 .menu li{
 74     width:2.81rem;
 75     height:4.1rem;
 76     float:left;
 77     margin-right:1.625rem;
 78     /*background-color:blue;*/
 79 }
 80 
 81 .menu li a{
 82     display:block;   /*为了宽和高生效，将a标签转为块元素*/
 83     width:2.8rem;
 84     height:2.8rem;
 85     background:url(../images/icons.png) left -3rem no-repeat;
 86     background-size:3rem 42rem;   /*将雪碧图压缩*/
 87 }
 88 
 89 .menu li h2{
 90     font:13px/1.3rem '微软雅黑';   /*  注意：字体不要设置em，设置em文字随页面变动可能会变小，无意义*/
 91     color:#666;
 92     text-align:center;
 93 }
 94 
 95 .menu li:nth-child(2) a{
 96     background-position:left -6rem;
 97 }
 98 .menu li:nth-child(3) a{
 99     background-position:left -9rem;
100 }
101 .menu li:nth-child(4) a{
102     background-position:left -12rem;
103 }
104 .menu li:nth-child(5) a{
105     background-position:left -15rem;
106 }
107 .menu li:nth-child(6) a{
108     background-position:left -18rem;
109 }
110 .menu li:nth-child(7) a{
111     background-position:left -21rem;
112 }
113 .menu li:nth-child(8) a{
114     background-position:left -24rem;
115 }
116 
117 /* -----------*/
118 .common_model{
119     background-color:#fff;
120     margin:0.5rem 0;
121 }
122 
123 .common_title{
124     width:17.75rem;
125     height:0.9rem;
126     margin:0.8rem auto 0;
127 }
128 
129 .common_title h3{
130     font:15px/0.9rem '微软雅黑';
131     color:#fbc83d;
132     border-left:0.25rem solid #fbc83d;
133     text-indent:0.4rem;
134 }
135 
136 .common_title a{
137     font:12px/0.9rem '微软雅黑';
138     color:#7f7f7f;
139 }
140 
141 .banner{
142     width:17.75rem;
143     height:4.5rem;
144     margin:0.5rem auto 0;
145 }
146 
147 .banner img{
148     width:100%;
149 }
150 
151 .goods_list{
152     width:17.75rem;
153     height:9.35rem;
154     margin:0.5rem auto 0.7rem;
155 }
156 
157 .goods_list li{
158     float:left;
159     width:5.8rem;
160     height:9.35rem;
161     border-right:1px solid #e7e7e7;
162 
163     position:relative;
164 }
165 
166 .goods_list li:last-child{   /* 将最后一个li的右边线设置为0，即隐藏看不见*/
167     border-right:0px;
168 }
169 
170 .goods_list li .goods_pic{
171     display:block;
172     width:4.5rem;
173     height:4.5rem;
174     margin:0.5rem auto；
175 }
176 
177 .goods_list li .goods_pic img{
178     width:100%;
179 }
180 
181 .goods_list li .goods_name{
182     width:5.0rem;
183     font:15px/15px '微软雅黑';
184     color:#666;
185     margin:0.75rem auto 0;
186 
187     /* 这三行代码同时使用，是为了将文字只展示一行,多余的文字用...展示*/
188     overflow:hidden;
189     white-space:nowrap;  /* 文字只能一行展示*/
190     text-overflow:ellipsis;  /* 多余的文字用...展示*/
191 }
192 
193 .goods_list li .goods_unit{
194     width:5.0rem;
195     font:12px/12px '微软雅黑';
196     color:#bbb;
197     margin:0.8rem auto 0;
198 }
199 
200 .goods_list li .goods_price{
201     width:5.0rem;
202     font:12px/12px '微软雅黑';
203     color:#ff4400;
204     margin:0.5rem auto 0;
205 }
206 
207 .goods_list li .add_chart{
208     position:absolute;  /* 绝对定位将a变为了行内块元素了，所以不需要display:block，直接就可以设置宽和高了*/
209     right:0.675rem;
210     bottom:0;
211     width:1.7rem;
212     height:1.7rem;
213     background:url(../images/icons.png) left -27rem no-repeat;
214     background-size:3rem 42rem;
215 }
216 
217 @media (min-width:375px){   /* 当页面宽度大于375px时的字体大小 */
218     .goods_list li .goods_unit{
219         font:14px/14px '微软雅黑';
220     }
221 
222     .goods_list li .goods_price{
223         font:14px/14px '微软雅黑';
224     }
225 }
226 
227 
228 /* ---------------------------------------------*/
229 .footer{
230     position:absolute;
231     left:0;
232     bottom:0;
233     background-color:#fff;
234     width:100%;         /* 绝对定位将.footer转换成了内联块元素，内联块元素如果没有设置宽高，宽高由内容决定， 所以这里继承了父元素的宽度*/
235     height:2.5rem;
236 }
237 
238 .footer ul{
239     height:2.5rem;
240 }
241 
242 .footer li{
243     width:25%;
244     height:2.5rem;
245     float:left;
246 }
247 
248 .footer li a{
249     display:block;
250     width:1.375rem;
251     height:1.3rem;
252     margin:0.25rem auto 0;
253     background:url(../images/icons.png) left -30rem no-repeat;
254     background-size:3rem 42rem;
255 }
256 
257 .footer li:nth-child(2) a{
258     background-position:left -33rem;
259 }
260 .footer li:nth-child(3) a{
261     background-position:left -36rem;
262 }
263 .footer li:nth-child(4) a{
264     background-position:left -39rem;
265 }
266 
267 .footer li h2{
268     font:12px/12px '微软雅黑';
269     color:#949392;
270     text-align:center;
271     margin-top:0.2rem;
272 }
273 
274 
275 
276 /* 下面这两个修改了swiper.min.css文件里面相关的样式*/
277 .swiper-button-next,.swiper-button-prev {
278 
279     width: 13px;
280     height: 22px;
281     margin-top: -11px;
282 
283     -moz-background-size: 13px 22px;
284     -webkit-background-size: 13px 22px;
285     background-size: 12px 22px;
286 
287 }
288 
289 .swiper-pagination-bullet-active{
290     background-color:gold;
291 }

main.css

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport"
  6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>天天生鲜-首页-手机版</title>
  9 
 10     <script type="text/javascript" src="js/set_root.js"></script>   <!--引入js文件，该文件设置整体布局的大小变化-->
 11     <script type="text/javascript" src="js/zepto.min.js"></script>
 12     <!--不依赖jquery 或者 zepto的时候
 13     <script type="text/javascript" src="js/swiper.min.js"></script> -->
 14     <script type="text/javascript" src="js/swiper.jquery.min.js"></script>
 15 
 16     <link rel="stylesheet" type="text/css" href="css/swiper.min.css">   <!--该文件定义了幻灯片的相关样式，该文件放在这里是有原因的，css/main.css的更新可以覆盖该文件-->
 17     <link rel="stylesheet" type="text/css" href="css/reset.css" >
 18     <link rel="stylesheet" type="text/css" href="css/main.css">    <!--可以在该文件里更新css/swiper.min.css的内容-->
 19 
 20     <script type="text/javascript">   <!--幻灯片样式交互-->
 21         $(function(){
 22             var swiper = new Swiper('.swiper-container', {
 23                     pagination: '.swiper-pagination',
 24                     prevButton: '.swiper-button-prev',
 25                     nextButton: '.swiper-button-next',
 26                     initialSlide :2,
 27                     paginationClickable: true,
 28                     loop: true,
 29                     autoplay:3000,
 30                     autoplayDisableOnInteraction:false
 31                 });
 32         })
 33 
 34         /*
 35         swiper使用参数：
 36             1、initialSlide：初始索引值，从0开始
 37             2、direction：滑动方向 horizontal | vertical（纵向）
 38             3、speed：滑动速度，单位ms
 39             4、autoplay：设置自动播放及播放时间
 40             5、autoplayDisableOnInteraction：用户操作swipe后是否还自动播放，默认是true，不再自动播放
 41             6、pagination：分页圆点
 42             7、paginationClickable：分页圆点是否点击
 43             8、prevButton：上一页箭头
 44             9、nextButton：下一页箭头
 45             10、loop：是否首尾衔接
 46             11、onSlideChangeEnd：回调函数，滑动结束时执行
 47         */
 48     </script>
 49 
 50 </head>
 51 <body>
 52 
 53 <div class="main_wrap">
 54     <div class="header clearfix">
 55         <a href="" class="logo"><img src="images/logo.png" alt="log"></a>
 56         <a href="" class="search"></a>
 57     </div>
 58 
 59 
 60     <div class="center_wrap">
 61         <div class="slide">
 62 
 63             <!--注意：该部分是为了和上面的swiper样式结合而使用的的固定格式-->
 64             <div class="swiper-container">
 65                   <!--  幻灯片   -->
 66                   <div class="swiper-wrapper">
 67                     <div class="swiper-slide"><img src="images/slide.jpg"></div>
 68                     <div class="swiper-slide"><img src="images/slide2.jpg"></div>
 69                     <div class="swiper-slide"><img src="images/slide3.jpg"></div>
 70                   </div>
 71 
 72                      <!--  小圆点分页  -->
 73                     <div class="swiper-pagination"></div>
 74 
 75                     <!--  上一页  -->
 76                    <div class="swiper-button-prev"></div>
 77 
 78                     <!--  下一页  -->
 79                    <div class="swiper-button-next"></div>
 80                 </div>
 81             <!--   -->
 82 
 83         </div>
 84 
 85         <div class="menu_con clearfix">
 86             <ul class="menu">
 87                 <li>
 88                     <a href=""></a>
 89                     <h2>水果</h2>
 90                 </li>
 91                 <li>
 92                     <a href=""></a>
 93                     <h2>海鲜</h2>
 94                 </li>
 95                 <li>
 96                     <a href=""></a>
 97                     <h2>肉类</h2>
 98                 </li>
 99                 <li>
100                     <a href=""></a>
101                     <h2>禽蛋</h2>
102                 </li>
103                 <li>
104                     <a href=""></a>
105                     <h2>蔬菜</h2>
106                 </li>
107                 <li>
108                     <a href=""></a>
109                      <h2>速冻</h2>
110                 </li>
111                 <li>
112                     <a href=""></a>
113                     <h2>热卖</h2>
114                 </li>
115                 <li>
116                     <a href=""></a>
117                     <h2>新品</h2>
118                 </li>
119             </ul>
120         </div>
121 
122         <div class="common_model clearfix">
123             <div class="common_title">
124                 <h3 class="fl">新鲜水果</h3>
125                 <a href="#" class="fr">更多 &gt;</a>
126             </div>
127 
128             <div class="banner"><img src="images/banner.jpg" alt="banner"></div>
129 
130             <ul class="goods_list">
131                 <li>
132                     <a href="#" class="goods_pic"><img src="images/goods.jpg" alt=""></a>
133                     <h3 class="goods_name">新西兰皇家大红富士</h3>
134                     <p class="goods_unit">12/提</p>
135                     <p class="goods_price">¥68.00</p>
136                     <a href="#" class="add_chart"></a>
137                 </li>
138                 <li>
139                     <a href="#" class="goods_pic"><img src="images/goods.jpg" alt=""></a>
140                     <h3 class="goods_name">新西兰皇家大红富士</h3>
141                     <p class="goods_unit">12/提</p>
142                     <p class="goods_price">¥68.00</p>
143                     <a href="#" class="add_chart"></a>
144                 </li>
145                 <li>
146                     <a href="#" class="goods_pic"><img src="images/goods.jpg" alt=""></a>
147                     <h3 class="goods_name">新西兰皇家大红富士</h3>
148                     <p class="goods_unit">12/提</p>
149                     <p class="goods_price">¥68.00</p>
150                     <a href="#" class="add_chart"></a>
151                 </li>
152             </ul>
153         </div>
154     </div>
155 
156 
157     <div class="footer">
158         <ul>
159             <li>
160                 <a href=""></a>
161                 <h2>首页</h2>
162             </li>
163             <li>
164                 <a href=""></a>
165                 <h2>分类</h2>
166             </li>
167             <li>
168                 <a href=""></a>
169                 <h2>购物车</h2>
170             </li>
171             <li>
172                 <a href=""></a>
173                 <h2>我的</h2>
174             </li>
175         </ul>
176     </div>
177 
178 </div>
179 
180 </body>
181 </html>

index.html

-----------------------------------------------------手机整屏滚动------------------------------------------------------------------------

 1 /* 去掉标签默认的内边距和外边距 */
 2 body,p,h1,h2,h3,h4,h5,h6,ul,dl,dd,input,select{margin:0;padding:0}
 3 
 4 /* 去掉列表的项目符号 */
 5 ul{list-style:none;}
 6 
 7 em{font-style:normal;}
 8 
 9 /* 去掉默认的下划线 */
10 a{text-decoration:none;}
11 
12 /* 去掉图片在加链接时的边框 */
13 img{border:0;}
14 
15 
16 
17 
18 .clearfix:before,.clearfix:after{
19     content:'';
20     display:table;
21 }
22 
23 .clearfix:after{
24     clear:both;
25 }
26 
27 .clearfix{zoom:1}
28 
29 
30 .fl{float:left;}
31 .fr{float:right;}

reset.css

 1 /**
 2  * Swiper 3.4.0
 3  * Most modern mobile touch slider and framework with hardware accelerated transitions
 4  * 
 5  * http://www.idangero.us/swiper/
 6  * 
 7  * Copyright 2016, Vladimir Kharlampidi
 8  * The iDangero.us
 9  * http://www.idangero.us/
10  * 
11  * Licensed under MIT
12  * 
13  * Released on: October 16, 2016
14  */
15 .swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-moz-box-orient:vertical;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate(0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{-webkit-box-lines:multiple;-moz-box-lines:multiple;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}.swiper-container-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{-webkit-flex-shrink:0;-ms-flex:0 0 auto;flex-shrink:0;width:100%;height:100%;position:relative}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-ms-flex-align:start;-webkit-align-items:flex-start;align-items:flex-start;-webkit-transition-property:-webkit-transform,height;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform,height}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-wp8-horizontal{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-wp8-vertical{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;-moz-background-size:27px 44px;-webkit-background-size:27px 44px;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-moz-appearance:none;-ms-appearance:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-white .swiper-pagination-bullet{background:#fff}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-o-transform:translate(0,-50%);-ms-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:5px 0;display:block}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 5px}.swiper-pagination-progress{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progress .swiper-pagination-progressbar{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;-moz-transform-origin:left top;-ms-transform-origin:left top;-o-transform-origin:left top;transform-origin:left top}.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar{-webkit-transform-origin:right top;-moz-transform-origin:right top;-ms-transform-origin:right top;-o-transform-origin:right top;transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progress{width:100%;height:4px;left:0;top:0}.swiper-container-vertical>.swiper-pagination-progress{width:4px;height:100%;left:0;top:0}.swiper-pagination-progress.swiper-pagination-white{background:rgba(255,255,255,.5)}.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar{background:#fff}.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar{background:#000}.swiper-container-3d{-webkit-perspective:1200px;-moz-perspective:1200px;-o-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-coverflow .swiper-wrapper,.swiper-container-flip .swiper-wrapper{-ms-perspective:1200px}.swiper-container-cube,.swiper-container-flip{overflow:visible}.swiper-container-cube .swiper-slide,.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-cube .swiper-slide .swiper-slide,.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active,.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top,.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-slide{visibility:hidden;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;-moz-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-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}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-moz-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-zoom-container{width:100%;height:100%;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;-moz-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;-moz-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:"";width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;-webkit-background-size:100%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}

swiper.min.css

  1 body{
  2     font-family:'Microsoft Yahei';
  3 }
  4 
  5 html,body { width:100%; height:100%;}
  6 
  7 
  8 .swiper-container { width: 100%; height: 100%;} 
  9 
 10 
 11 /* .p1{
 12     background-color: #f6de9e;
 13 }
 14 
 15 
 16 .p1 h1{
 17     width:100%;
 18     position:absolute;
 19     top:30%;
 20     text-align:center;
 21     transform:rotate(-90deg);
 22     transform-origin:60px center;
 23     opacity:0;
 24     transition: all 2000ms cubic-bezier(0.260, -0.600, 0.345, 1.560);
 25 }
 26 
 27 .p1 p{
 28 
 29     width:100%;
 30     position:absolute;
 31     top:40%;
 32     text-align:center;
 33     transform:translateY(100px);
 34     opacity:0;
 35     transition: all 2000ms cubic-bezier(0.260, -0.600, 0.345, 1.560);
 36 }
 37 
 38 
 39 
 40 .p1.moving h1{
 41     opacity:1;
 42     transform:rotate(0deg);
 43 }
 44 
 45 .p1.moving p{
 46     opacity:1;
 47     transform:translateY(0px);
 48 }
 49 
 50 
 51 
 52 
 53 
 54 
 55 .p2{
 56     background-color:#92d5ea;
 57 }
 58 
 59 .p3{
 60     background-color:#e28cd7;
 61 }
 62 
 63 .p4{
 64     background-color:#18c195;
 65 } */
 66 
 67 
 68 
 69  
 70 .p1 { background-color:#f6de9e;} 
 71 
 72 .p1 h1,.p1 p,.p2 h1,.p2 p,.p3 h1,.p3 p,.p4 h1,.p4 p{text-align:center;position:absolute;top:30%;width:100%;color:#dc6835; transition: all 500ms cubic-bezier(0.260, -0.600, 0.345, 1.560);}
 73 
 74 
 75 
 76 
 77 
 78 
 79 
 80 .p1 p,.p2 p,.p3 p,.p4 p{top:40%;font-size:20px;}
 81 
 82 .p1 h1{
 83     transform:rotate(-90deg);
 84     transform-origin:80px center;
 85     opacity: 0;
 86 }
 87 
 88 .p1 p{
 89     transform:translateY(200px);
 90     opacity: 0;
 91 }
 92 
 93 .p1.moving h1{
 94     transform:rotate(0deg);
 95     transform-origin:80px center;
 96     opacity: 1;
 97 }
 98 
 99 .p1.moving p{
100     transform:translateY(0px);
101     opacity: 1;
102 }
103 
104 
105 
106 
107 .p2 { background-color:#92d5ea;} 
108 .p2 h1,.p2 p{color:#9e57e6}
109 
110 
111 .p2 h1{
112     transform:scale(0.3,0.3);    
113     opacity: 0;
114 }
115 
116 .p2 p{
117     transform:translateY(200px);
118     opacity: 0;
119 }
120 
121 .p2.moving h1{
122     transform:scale(1,1);
123     opacity: 1;
124 }
125 
126 .p2.moving p{
127     transform:translateY(0px);
128     opacity: 1;
129 }
130 
131 
132 .p3 { background-color:#e28cd7;}
133 .p3 h1,.p3 p{color:#dcda35}
134 
135 
136 .p3 h1{
137     transform:rotate(-90deg);
138     transform-origin:80px center;
139     opacity: 0;
140 }
141 
142 .p3 p{
143     transform:translateY(200px);
144     opacity: 0;
145 }
146 
147 .p3.moving h1{
148     transform:rotate(0deg);
149     transform-origin:80px center;
150     opacity: 1;
151 }
152 
153 .p3.moving p{
154     transform:translateY(0px);
155     opacity: 1;
156 }
157 
158 
159 .p4 { background-color:#18c195;}
160 .p4 h1,.p4 p{color:#b3dc35}
161 
162 
163 .p4 h1{
164     transform:rotate(-90deg);
165     transform-origin:80px center;
166     opacity: 0;
167 }
168 
169 .p4 p{
170     transform:translateY(200px);
171     opacity: 0;
172 }
173 
174 .p4.moving h1{
175     transform:rotate(0deg);
176     transform-origin:80px center;
177     opacity: 1;
178 }
179 
180 .p4.moving p{
181     transform:translateY(0px);
182     opacity: 1;
183 } 
184 
185 
186 .up_icon{
187     width:24px;
188     height:20px;
189     position:absolute;
190     left:50%;
191     margin-left:-12px;
192     bottom:20px;
193     background:url(../images/arrow.png) no-repeat;
194     background-size:100% 100%;
195     z-index: 900;
196     animation-name:upup;   /*引用了下方的upup*/
197     animation-time-function:ease;
198     animation-duration:1300ms;
199     animation-iteration-count:infinite;
200 }
201 
202 
203 /*最下方箭头图标动态效果*/
204 @keyframes upup{
205     0%{
206         transform:translateY(0px);
207         opacity:1;
208     }
209 
210     50%{
211         transform:translateY(-15px);
212         opacity:1
213     }
214 
215     100%{
216         transform:translateY(-30px);
217         opacity:0
218     }
219 }

main.css

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 6     <script type="text/javascript" src="js/zepto.min.js"></script>
 7     <script type="text/javascript" src="js/swiper.jquery.min.js"></script>
 8 
 9     <link rel="stylesheet" type="text/css" href="css/reset.css">
10     <link rel="stylesheet" type="text/css" href="css/swiper.min.css">   <!--该文件定义了幻灯片的相关样式，该文件放在这里是有原因的，css/main.css的更新可以覆盖该文件-->
11     <link rel="stylesheet" type="text/css" href="css/main.css">   <!--可以在该文件里更新css/swiper.min.css的内容-->
12     <script type="text/javascript">
13     
14     $(function(){
15         setTimeout(function(){        //该定时器是为了让第一页也有动画效果
16             $('.p1').addClass('moving');
17         },0);
18 
19         var myswiper = new Swiper('.swiper-container',{
20             direction: 'vertical',       //纵向滚动
21             pagination: '.swiper-pagination',   //展示右侧圆点
22             onSlideChangeEnd:function(swiper){    //回调函数，滑动结束时执行
23                 console.log(swiper);
24                 var index = swiper.activeIndex;    //获取页面index值
25                 $('.swiper-slide').removeClass('moving').eq(index).addClass('moving');
26             }
27         })
28     });
29 
30 </script>
31 
32     <title>整屏滚动</title>
33 </head>
34 <body>
35 
36 <!--注意：该部分是为了和上面的swiper样式结合而使用的的固定格式-->
37 <div class="swiper-container">
38     <div class="swiper-wrapper">
39 
40         <div class="swiper-slide p1">
41             <h1>页面标题一</h1>
42             <p>页面内容</p>
43         </div>
44 
45         <div class="swiper-slide p2">
46             <h1>页面标题二</h1>
47             <p>页面内容</p>
48         </div>
49 
50 
51         <div class="swiper-slide p3">
52             <h1>页面标题三</h1>
53             <p>页面内容</p>
54         </div>
55 
56 
57         <div class="swiper-slide p4">
58             <h1>页面标题四</h1>
59             <p>页面内容</p>
60         </div>
61 
62     </div>    
63     <div class="swiper-pagination"></div>   <!--右侧圆点-->
64 </div>
65 <!--   -->
66 
67 <div class="up_icon"></div>
68 
69 </body>
70 </html>

index.html

posted on 2020-01-01 20:46 cherry_ning 阅读(753) 评论(0) 收藏举报

刷新页面返回顶部

cherry_ning