此篇博客整理了常用的轮播效果，适用于所有开发人员
swipe是当下相对而言较好用的轮播插件，下面是博主整理的demo源代码，可直接上手（备注：需自己手动swipe所需的j和css）
此段代码总共是有三个详细效果，并且备注了初始化js对应的html，和使用swipe当中所需要用到的一些小的属性控制方法！
这里就不一一详解
博客园开通很久，也一直没时间好好经营自己的博客，第一篇博客，难免细节的地方，排列顺序方法，内容介绍肯定难免存在许些问题，博主承诺以后会记录的越来越优质
希望大家多多指教
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>公用效果</title> | |
| <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/> | |
| <script src="js/swiper.min.js"></script> | |
| <style type="text/css"> | |
| li{ | |
| list-style: none; | |
| } | |
| /*分页器颜色样式控制*/ | |
| .swiper-pagination-bullet{ | |
| background-color: #8a6b78 !important; | |
| opacity: 1 !important; | |
| } | |
| .swiper-pagination-bullet-active{ | |
| background-color: #e7cccc !important; | |
| } | |
| /*前后按钮控制样式*/ | |
| .boxleft{ | |
| background: url(img/gift-left.png) no-repeat !important; | |
| background-size: 100%; | |
| outline: none; | |
| } | |
| .boxright{ | |
| background: url(img/gift-right.png) no-repeat !important; | |
| background-size: 100%; | |
| outline: none; | |
|
} /*outline: none;属性可以去除点击出现边框*/ |
|
| /*.*/ | |
| /*鼠标移出隐藏按钮，移入显示按钮*/ | |
| .swiper-container .hide{ | |
| opacity:0; | |
| } | |
| .swiper-button-next,.swiper-button-prev{ | |
| transition:opacity .5s; | |
| } | |
| /*.*/ | |
| /*主图下滚动*/ | |
| #box { | |
| 1200px; | |
| margin: 0 auto; | |
| } | |
| #box .swiper-wrapper{ | |
| margin-top:40px ; | |
| padding-left: 12px; | |
| } | |
| #box ul>li { | |
| display: inline-block; | |
| height: 100%; | |
| box-sizing: border-box; | |
| } | |
| #box ul>li>img { | |
| 170px; | |
| height: 115px; | |
| } | |
| /*上下切换控制*/ | |
| .smlbannertop{ | |
| 400px; | |
| } | |
| .smlbannertop img { | |
| 400px; | |
| height: 305px; | |
| } | |
| .gallery-thumbs .swiper-slide { | |
| height: 100%; | |
| opacity: 0.8; | |
| } | |
| .gallery-thumbs .swiper-slide-thumb-active { | |
| opacity: 1; | |
| } | |
| .smlbannerall{ | |
| 1000px; | |
| } | |
| .smlbannerall img { | |
| 176px; | |
| height: 120px; | |
| margin: 20px 0px 0 8px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!--top banner--> | |
| <div class="swiper-container" id="bigbanner"> | |
| <div class="swiper-wrapper"> | |
| <div class="swiper-slide"><img src="img/banner01.jpg"></div> | |
| <div class="swiper-slide"><img src="img/banner02.jpg"></div> | |
| <div class="swiper-slide"><img src="img/banner03.jpg"></div> | |
| </div> | |
| <!--分页器--> | |
| <div class="swiper-pagination bigpagination"></div> | |
| <!--前进后退按钮--> | |
| <div class="swiper-button-prev swiper-button-black bigleft"></div> | |
| <div class="swiper-button-next swiper-button-black bigright"></div> | |
| </div> | |
| <!--主图下滚动--> | |
| <div class="swiper-container" style=" 1300px; margin: 0 auto;"> | |
| <div class="swiper-container" id="box"> | |
| <ul class="swiper-wrapper"> | |
| <li class="swiper-slide"> | |
| <img src="img/choose1.jpg" /> | |
| </li> | |
| <li class="swiper-slide"> | |
| <img src="img/choose2.jpg" /> | |
| </li> | |
| <li class="swiper-slide"> | |
| <img src="img/choose3.jpg" /> | |
| </li> | |
| <li class="swiper-slide"> | |
| <img src="img/choose4.jpg" /> | |
| </li> | |
| <li class="swiper-slide"> | |
| <img src="img/choose5.jpg" /> | |
| </li> | |
| <li class="swiper-slide"> | |
| <img src="img/choose3.jpg" /> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="swiper-button-prev boxleft"></div> | |
| <div class="swiper-button-next boxright"></div> | |
| </div> | |
| <!--切换效果--> | |
| <div class="swiper-container gallery-top smlbannertop"> | |
| <div class="swiper-wrapper"> | |
| <div class="swiper-slide"> | |
| <img src="img/comrecommend.jpg" /> | |
| </div> | |
| <div class="swiper-slide"> | |
| <img src="img/comrecommend.jpg" /> | |
| </div> | |
| <div class="swiper-slide"> | |
| <img src="img/comrecommend.jpg" /> | |
| </div> | |
| <div class="swiper-slide"> | |
| <img src="img/comrecommend.jpg" /> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="swiper-container gallery-thumbs smlbannerall"> | |
| <ul class="swiper-wrapper"> | |
| <li class="swiper-slide"> | |
| <img src="img/comrecommend01.jpg" /> | |
| </li> | |
| <li class="swiper-slide"> | |
| <img src="img/comrecommend02.jpg" /> | |
| </li> | |
| <li class="swiper-slide"> | |
| <img src="img/comrecommend03.jpg" /> | |
| </li> | |
| <li class="swiper-slide"> | |
| <img src="img/comrecommend04.jpg" /> | |
| </li> | |
| </ul> | |
| </div> | |
| <script> | |
| //topbanner | |
| var mySwiper = new Swiper('#bigbanner', { | |
| direction: 'horizontal', | |
| //是否无限轮播 | |
| loop: true, | |
| //切换时间 | |
| autoplay: { | |
| delay: 3000, | |
| disableOnInteraction: true,//用户操作swiper之后，是否禁止autoplay。默认为true：停止。 | |
| }, | |
| //过渡时间 | |
| speed: 1300, | |
| // 如果需要分页器 | |
| pagination: { | |
| el: '.bigpagination', | |
| clickable :true, | |
| }, | |
| // 如果需要前进后退按钮 | |
| navigation: { | |
| nextEl: '.bigright', | |
| prevEl: '.bigleft', | |
| }, | |
| //切换效果 | |
| effect:"fade" | |
| }) | |
| //鼠标移出隐藏按钮，移入显示按钮 | |
| mySwiper.el.onmouseover=function(){ | |
| mySwiper.navigation.$nextEl.removeClass('hide'); | |
| mySwiper.navigation.$prevEl.removeClass('hide'); | |
| } | |
| mySwiper.el.onmouseout=function(){ | |
| mySwiper.navigation.$nextEl.addClass('hide'); | |
| mySwiper.navigation.$prevEl.addClass('hide'); | |
| } | |
| //主图下滚动box | |
| var swiper = new Swiper('#box', { | |
| //显示几个盒子 | |
| slidesPerView: 6, | |
| //盒子之间的间距 | |
| spaceBetween: 0, | |
| autoplayDisableOnInteraction:true, | |
| loop: true, | |
| autoplay: { | |
| delay: 2000 | |
| }, | |
| speed: 800, | |
| // 如果需要前进后退按钮 | |
| navigation: { | |
| nextEl: '.boxright', | |
| prevEl: '.boxleft', | |
| }, | |
| }); | |
| //切换效果 | |
| var galleryThumbs = new Swiper('.smlbannerall', { | |
| // 控制显示几个 | |
| slidesPerView: 4, | |
| loop: true, | |
| loopedSlides: 5, //一般设置为本来slide的个数 | |
| watchSlidesVisibility: true, | |
| watchSlidesProgress: true, | |
| }); | |
| var galleryTop = new Swiper('.smlbannertop', { | |
| spaceBetween: 10, | |
| loop:true, | |
| loopedSlides: 5, //一般设置为本来slide的个数 | |
| thumbs: { | |
| swiper: galleryThumbs, | |
| }, | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
此效果图一一贴出