zoukankan      html  css  js  c++  java
  • 插件-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
        });
    
     */

    (完)

     

  • 相关阅读:
    案例 :表格隔行变色效果
    案例:百度换肤
    案例:排他思想(算法)
    JS运动基础
    DOM的高级应用
    jsDOM操作应用
    js中的DOM基础
    js实现向左向右无缝轮动
    JavaScript定时器的使用
    JavaScript基础2
  • 原文地址:https://www.cnblogs.com/hanguozhi/p/7473893.html
Copyright © 2011-2022 走看看