插件-3D轮播图
先上效果图
查看实例点击 这里
这个栗子中，可以选择展示 5 张 或者展示 3 张，即使是只有一个slide，也可以完成布局，正常轮播，麻麻再也不用怕只有4个slid而不能用这种轮播啦！
本栗实现原理是使用CSS3的 transition 属性 ，在轮播的时候只需要给slide 赋予对应的位置，slide 就能够通从上一位置运动到下一位置。
配置：
var swiper_3D = new Swiper3D ({ 'slideContainer':'.swiper3D', // 必填 'slideWarpper':'.swiper-wrapper', // 必填 'slide':'.swiper-slide', // 必填 'leftBtn':'.swiper3D-leftbtn', // 左按钮 'rightBtn':'.swiper3D-rightbtn', // 右按钮 'activeIndex':0, //初始化展示的第几个 slide 'viewType': 5, // 3 展示 3张 ，5 展示 5张 'durTime':200, // 切换过场时间，选填，默认400 'autoPlay':true, //是否自动播放 false 不自动播放， true 自动播放 ，默认false 'autoTime':3000 //自动播放事件 选填， 默认 4000，且只在自动播放开启时有效 });
如果需要能够通过手指活鼠标滑动 触发切换的话 ，可以引入 touch 插件，进行如下配置:
在我前面的一篇文章中有介绍到它的源码及用法，详情点击 这里 。
new TouchTool({ 'obj': document.getElementById('swiper3D'), 'direction': 'horizontal', //horizontal vertical水平垂直 'slideLeft': function() { swiper_3D.slideRight() }, 'slideRight': function() { swiper_3D.slideLeft() } })
swiper_3D 代码如下：
HTML ：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/swiper3D.css"/> </head> <body> <div class="swiper-container swiper3D" id="swiper3D"> <div class="swiper-wrapper"> <div class="swiper-slide"> slide1 </div> <div class="swiper-slide"> slide2 </div> <div class="swiper-slide"> slide3 </div> <div class="swiper-slide"> slide4 </div> <div class="swiper-slide"> slide5 </div> <div class="swiper-slide"> slide6 </div> <div class="swiper-slide"> slide7 </div> </div> <div class="swiper3D-leftbtn"> < </div> <div class="swiper3D-rightbtn"> > </div> </div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="js/touch.js"></script> <script src="js/swiper3D.js"></script> <script type="text/javascript"> var swiper_3D = new Swiper3D ({ 'slideContainer':'.swiper3D', 'slideWarpper':'.swiper-wrapper', 'slide':'.swiper-slide', 'leftBtn':'.swiper3D-leftbtn', 'rightBtn':'.swiper3D-rightbtn', 'activeIndex':0, 'viewType': 5, 'durTime':200, 'autoPlay':true, 'autoTime':3000 }); new TouchTool({ 'obj': document.getElementById('swiper3D'), 'direction': 'horizontal', //horizontal vertical水平垂直 'slideLeft': function() { swiper_3D.slideRight() }, 'slideRight': function() { swiper_3D.slideLeft() } }) </script> </body> </html>
CSS：
.swiper3D{ position: relative; width: 100%;height: 400px; max-width: 640px; margin: 0 auto; background-color:#ccc ; color: #fff; } .swiper3D .swiper-wrapper{ position: absolute; left: 0;top: 0; width: 100%;height: 100%; z-index: 1; } .swiper3D .swiper-slide{ position: absolute; left: 50%;top:0; width: 50%;height:100%; margin-left: -25%; font-size: 40px; transition: all .4s linear; -webkit-transition: all .4s linear; cursor: pointer; /*下面设置文字居中，可以去掉*/ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } /*====没用代码，可以去掉====*/ .swiper-wrapper div:nth-of-type(1){background-color: #B41B1B;} .swiper-wrapper div:nth-of-type(2){background-color: #C9CA2D;} .swiper-wrapper div:nth-of-type(3){background-color: #92CA2D;} .swiper-wrapper div:nth-of-type(4){background-color: #30CA2D;} .swiper-wrapper div:nth-of-type(5){background-color: #2DCAA7;} .swiper-wrapper div:nth-of-type(6){background-color: #2DA7CA;} .swiper-wrapper div:nth-of-type(7){background-color: #2D4FCA;} .swiper-wrapper div:nth-of-type(8){background-color: #732DCA;} .swiper-wrapper div:nth-of-type(9){background-color: #B92DCA;} .swiper-wrapper div:nth-of-type(10){background-color: #CA2D73;} /*====没用代码，可以去掉====*/ .swiper3D-leftbtn, .swiper3D-rightbtn{ position: absolute; top: 50%; margin-top: -40px; width: 40px;height: 80px; background-color: #25A27C; font-size: 30px; font-weight: bold; line-height: 80px; text-align: center; cursor: pointer; z-index: 10; } .swiper3D-leftbtn{left: 20px;} .swiper3D-rightbtn{right: 20px;} /*导航*/ .navbox{ width: 100%; text-align: center; margin-top: 20px; } .navbox span{ display: inline-block; width: 30px;height: 30px; margin: 5px; border-radius: 100%; background-color: #00C81B; opacity: .7; cursor: pointer; } .navbox span.active{ opacity: 1; } /* *在这里 调整每一个的位置 */ /*从左往右 第一个*/ .swiper3D .left{ opacity: .5; transform: translateX(-30%) scale3d(.6,.6,.6) ; -webkit-transform: translateX(-30%) scale3d(.6,.6,.6) ; -webkit-transform-origin: left center; transform-origin: left center; z-index: 1; } /*从左往右 第二个*/ .swiper3D .left-harf{ opacity: .8; transform: translateX(-15%) scale3d(.8,.8,.8) ; -webkit-transform: translateX(-15%) scale3d(.8,.8,.8) ; -webkit-transform-origin: left center; transform-origin: left center; z-index: 5; } /*从左往右 第三个*/ .swiper3D .front{ opacity: 1; transform: translateX(0) scale3d(1,1,1) ; -webkit-transform: translateX(0) scale3d(1,1,1) ; z-index: 10; } /*从左往右 第四个*/ .swiper3D .right-harf{ opacity: .8; transform: translateX(15%) scale3d(.8,.8,.8) ; -webkit-transform: translateX(15%) scale3d(.8,.8,.8) ; -webkit-transform-origin: right center; transform-origin: right center; z-index: 5; } /*从左往右 第五个*/ .swiper3D .right{ opacity: .5; transform: translateX(30%) scale3d(.6,.6,.6) ; -webkit-transform: translateX(30%) scale3d(.6,.6,.6) ; -webkit-transform-origin: right center; transform-origin: right center; z-index: 1; } /*5个能看到的以外的 slide 放在最后面*/ .swiper3D .back{ opacity: 0; transform: translateX(0) scale3d(.5,.5,.5) ; -webkit-transform: translateX(0) scale3d(.5,.5,.5) ; z-index: 1; }
JS ：
function Swiper3D (param){ if(! 'transition' in document.documentElement.style && ! '-webkit-transition' in document.documentElement.style) return console.log('Not Support Css3') var self = this; this.slideContainer = $(param.slideContainer); this.slideWarpper = $(param.slideWarpper); this.slide = this.slideWarpper.find( param.slide ) ; this.leftBtn = $(param.leftBtn); this.rightBtn = $(param.rightBtn); this.autoPlay = param.autoPlay || false; this.autoTime = param.autoTime || 4000 ; this.durTime = param.durTime || 300; this.active = param .activeIndex || 0; this.left = this.left_href = this.right_href = this.right = 0; this.isMoving = false; this.interval = null; this.viewType = param.viewType || 5; if(this.slide.length < this.viewType){var i = Math.ceil( this.viewType/this.slide.length)-1;for (var j = 0 ; j < i;j++) {self.slide.each(function (){var _this = $(this).clone(true);self.slide.parent().append(_this);})}} this.slide = this.slideWarpper.find( param.slide ) this.length = this.slide.length; this.sortIndex = function( active ){ this.left_harf = active-1; this.active = active ; this.right_harf = active + 1; if(this.left_harf < 0) this.left_harf = this.length + this.left_harf; if(this.right_harf > this.length - 1) this.right_harf = this.right_harf - this.length; this.left = active-2; this.right = active + 2; if(this.left < 0) this.left = this.length + this.left; if(this.right > this.length - 1 ) this.right = this.right - this.length; } this.move = function (fix){ this.isMoving = true; this.sortIndex( fix ); this.slide.eq(this.left_harf).removeClass( 'left front right right-harf back').addClass('left-harf'); this.slide.eq(this.active).removeClass( 'left-harf left right right-harf back ').addClass('front'); this.slide.eq(this.right_harf).removeClass( 'left left-harf front right back').addClass('right-harf'); if(this.viewType === 5){ this.slide.eq(this.left).removeClass( 'left-harf front right right-harf back').addClass('left'); this.slide.eq(this.right).removeClass( 'left left-harf front right-harf back').addClass('right'); for (var i=0;i<this.length;i++) { if(i != this.left && i != this.left_harf && i != this.right_harf && i != this.right && i != this.active){ this.slide.eq(i).removeClass( 'left left-harf front right-harf right').addClass('back'); } } }else{ for (var i=0;i<this.length;i++) { if( i != this.left_harf && i != this.right_harf && i != this.active){ this.slide.eq(i).removeClass( 'left-harf front right-harf').addClass('back'); } } } setTimeout(function (){ self.isMoving = false }, self.durTime ) } this.slideLeft = function (){ if( self.isMoving ) return ; clearInterval(self.interval); self.active -- ; if( self.active < 0 ) self.active = self.length - 1; self.move( self.active ); } this.slideRight = function (){ if( self.isMoving ) return ; clearInterval(self.interval); self.active ++ ; if( self.active > self.length - 1 ) self.active = 0; self.move( self.active ); } this._autoPlay = function (){ if(! this.autoPlay) return false ; this.interval = setInterval(function (){ self.active++; if( self.active > self.length - 1 ) self.active = 0; self.move( self.active ); }, self.autoTime ) } this.initBtn = function (){ if(this.leftBtn.length !== 0) this.leftBtn.on( 'click' , self.slideLeft ); if(this.rightBtn.length !== 0) this.rightBtn.on( 'click' , self.slideRight ); } this.slide.on('click',function (){ var _index = $(this).index(); if(_index == self.active || self.isMoving) return; clearInterval(self.interval); self.active = _index ; self.move(self.active); self._autoPlay(); }); this.init = function (){ this.sortIndex( this.active ); this.move(this.active); this.initBtn(); this._autoPlay(); } this.init(); } /* USE： var swiper_3D = new Swiper3D ({ 'slideContainer':'.swiper3D', // 必填 'slideWarpper':'.swiper-wrapper', // 必填 'slide':'.swiper-slide', // 必填 'leftBtn':'.swiper3D-leftbtn', // 左按钮 'rightBtn':'.swiper3D-rightbtn', // 右按钮 'activeIndex':0, //初始化展示的第几个 slide 'viewType': 5, // 3 展示 3张 ，5 展示 5张 'durTime':200, // 切换过场时间，选填，默认400 'autoPlay':true, //是否自动播放 false 不自动播放， true 自动播放 ，默认false 'autoTime':3000 //自动播放事件 选填， 默认 4000，且只在自动播放开启时有效 }); 示例： var swiper_3D = new Swiper3D ({ 'slideContainer':'.swiper3D', // 必填 'slideWarpper':'.swiper-wrapper', // 必填 'slide':'.swiper-slide', // 必填 'rightBtn':'.swiper3D-rightbtn', // 右按钮 'activeIndex':0, //初始化展示的第几个 slide 默认 0 'viewType': 5, // 3 展示 3张 ，5 展示 5张 ,默认 5 }); */
（完）
