插件-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"> &lt; </div>
            <div class="swiper3D-rightbtn"> &gt; </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
    });

 */

（完）

 

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/hanguozhi/p/7473893.html