JQuery——banner旋转木马效果

Posted 2020-09-25 李大宝

博主在浏览网页时无意间发现了一种banner图的轮播方式——像旋转木马一样的轮播方式，博主感觉非常新颖独特，经过查阅资料，观看某课网教程总算搞了出来的，其原理主要利用了JQuery代码实现，好了不多说，看楼下代码及演示效果吧

首先是html及CSS代码

HTML

<div class="pictureSlider poster-main" data-setting=\'{"width":1000,"height":270,"posterWidth":640,"posterHeight":270,"scale":0.8,"autoPlay":true,"delay":2000,"speed":300}\'>
    <div class="poster-btn poster-prev-btn"></div>
    <ul class="poster-list">
        <li class="poster-item"><a href="http://www.16sucai.com"><img src="images/01.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="images/02.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="images/03.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="images/04.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="images/05.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="images/06.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="images/07.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="images/08.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="images/09.jpg" width="100%" height="100%"></a></li>
    </ul>
    <div class="poster-btn poster-next-btn"></div>
</div>

CSS代码

*{margin:0;padding:0;list-style: none;border:0;}
.container { margin:150px auto; max-width:1000px;}
.poster-main{ position:relative;width:800px;height:270px;}
.poster-main a,.poster-main img{display:block;}
.poster-main .poster-list{width:800px;height:270px;}
.poster-main .poster-list .poster-item{ position:absolute;left:0;top:0;}
.poster-main .poster-btn{ position:absolute;top:0;width:100px;height:270px; z-index:10; cursor:pointer;  opacity:0.8}
.poster-main .poster-prev-btn{left:0; background: url(../images/btn_l.png) no-repeat center center;}
.poster-main .poster-next-btn{right:0; background: url(../images/btn_r.png) no-repeat center center;}

然后是JS代码

;(function($){

    var Carousel = function(poster){
        var self = this;
        //保存单个旋转木马对象
        this.poster = poster;
        this.posterItemMain = poster.find("ul.poster-list");
        this.nextBtn = poster.find("div.poster-next-btn");
        this.prevBtn = poster.find("div.poster-prev-btn");
        this.posterItems = poster.find("li.poster-item");
        if( this.posterItems.size()%2 == 0 ){
            this.posterItemMain.append( this.posterItems.eq(0).clone() );
            this.posterItems = this.posterItemMain.children();
        };
        this.posterFirstItem = this.posterItems.first();
        this.posterLastItem = this.posterItems.last();
        this.rotateFlag = true;
        //默认配置参数
        this.setting = {
            "width" : 1000,            //幻灯片的宽度
            "height" : 270,            //幻灯片的高度
            "posterWidth" : 640,    //幻灯片第一帧的宽度
            "posterHeight" : 270,    //幻灯片第一帧的高度
            "scale" : 0.9,            //记录显示比例关系
            "speed" : 500,
            "autoPlay" : false,
            "delay" : 5000,
            "verticalAlign" : "middle" //top bottom
        };
        $.extend( this.setting,this.getSetting() );
        
        //设置配置参数值
        this.setSettingValue();
        //初始化幻灯片位置
        this.setPosterPos();
        //左旋转按钮
        this.nextBtn.click(function(){
            if(self.rotateFlag){
                self.rotateFlag = false;
                self.carouseRotate("left");
            };
        });
        //右旋转按钮
        this.prevBtn.click(function(){
            if(self.rotateFlag){
                self.rotateFlag = false;
                self.carouseRotate("right");
            };
        });
        //是否开启自动播放
        if(this.setting.autoPlay){
            this.autoPlay();
            this.poster.hover( function(){
                //self.timer是setInterval的种子
                window.clearInterval(self.timer);
            }, function(){
                self.autoPlay();
            });            
        };
    };
    Carousel.prototype = {
        autoPlay:function(){
            var self = this;
            this.timer = window.setInterval( function(){
                self.nextBtn.click();
            }, this.setting.delay );
        },

        //旋转
        carouseRotate:function(dir){
            var _this_  = this;
            var zIndexArr = [];
            //左旋转
            if(dir === "left"){
                this.posterItems.each(function(){
                    var self = $(this),
                        prev = self.prev().get(0)?self.prev():_this_.posterLastItem,
                        width = prev.width(),
                        height =prev.height(),
                        opacity = prev.css("opacity"),
                        left = prev.css("left"),
                        top = prev.css("top"),
                        zIndex = prev.css("zIndex");

                    zIndexArr.push(zIndex);
                    self.animate({
                        width :width,
                        height :height,
                      //zIndex :zIndex,
                        opacity :opacity,
                        left :left,
                        top :top
                    },_this_.setting.speed,function(){
                        _this_.rotateFlag = true;
                    });
                });
                //zIndex需要单独保存再设置，防止循环时候设置再取的时候值永远是最后一个的zindex
                this.posterItems.each(function(i){
                    $(this).css("zIndex",zIndexArr[i]);
                });
            }else if(dir === "right"){//右旋转
                this.posterItems .each(function(){
                    var self = $(this),
                        next = self.next().get(0)?self.next():_this_.posterFirstItem,
                        width = next.width(),
                        height =next.height(),
                        opacity = next.css("opacity"),
                        left = next.css("left"),
                        top = next.css("top"),
                        zIndex = next.css("zIndex");

                    zIndexArr.push(zIndex);                    
                    self.animate({
                        width :width,
                        height :height,
                      //zIndex :zIndex,
                        opacity :opacity,
                        left :left,
                        top :top
                    },_this_.setting.speed,function(){
                        _this_.rotateFlag = true;
                    });    
                });
                //zIndex需要单独保存再设置，防止循环时候设置再取的时候值永远是最后一个的zindex
                this.posterItems.each(function(i){
                    $(this).css("zIndex",zIndexArr[i]);
                });
            };
        },
        //设置剩余的帧的位置关系
        setPosterPos:function(){
            var self = this,
                sliceItems = this.posterItems.slice(1),
                sliceSize = sliceItems.size()/2,
                rightSlice = sliceItems.slice(0,sliceSize),
                //存在图片奇偶数问题
                level = Math.floor(this.posterItems.size()/2),
                leftSlice = sliceItems.slice(sliceSize);
            
            //设置右边帧的位置关系和宽度高度top
            var firstLeft = (this.setting.width - this.setting.posterWidth)/2;
            var rw = this.setting.posterWidth,
                fixOffsetLeft = firstLeft + rw,
                rh = this.setting.posterHeight,
                gap = ((this.setting.width - this.setting.posterWidth)/2)/level;
            
            //设置右边位置关系
            rightSlice.each(function(i){
                level--;
                rw = rw * self.setting.scale;
                rh = rh * self.setting.scale;
                var j = i;
                $(this).css({
                    zIndex :level,
                    width :rw,
                    height :rh,
                    opacity :1/(++j),
                    left :fixOffsetLeft+(++i)*gap - rw,
                    top :self.setVerticalAlign(rh)
                });
            });

            //设置左边的位置关系
            var lw = rightSlice.last().width(),
                lh  =rightSlice.last().height(),
                oloop = Math.floor(this.posterItems.size()/2);
            leftSlice.each(function(i){
                $(this).css({
                    zIndex:i,
                    width:lw,
                    height:lh,
                    opacity:1/oloop,
                    left:i*gap,
                    top:self.setVerticalAlign(lh)
                });
                lw = lw/self.setting.scale;
                lh = lh/self.setting.scale;
                oloop--;
            });
        },
    
        //设置垂直排列对齐
        setVerticalAlign:function(height){
            var verticalType  = this.setting.verticalAlign,
                top = 0;
            if(verticalType === "middle"){
                top = (this.setting.height-height)/2;
            }else if(verticalType === "top"){
                top = 0;
            }else if(verticalType === "bottom"){
                top = this.setting.height-height;
            }else{
                top = (this.setting.height-height)/2;
            };
            return top;
        },

        //设置配置参数值去控制基本的宽度高度
        setSettingValue:function(){
            this.poster.css({
                width:this.setting.width,
                height:this.setting.height
            });
            this.posterItemMain.css({
                width:this.setting.width,
                height:this.setting.height
            });
            //计算上下切换按钮的宽度
            var w = (this.setting.width-this.setting.posterWidth)/2;
            //设置切换按钮的宽高，层级关系
            this.nextBtn.css({
                width:w,
                height:this.setting.height,
                zIndex:Math.ceil(this.posterItems.size()/2)
            });
            this.prevBtn.css({
                width:w,
                height:this.setting.height,
                zIndex:Math.ceil(this.posterItems.size()/2)
            });            
            this.posterFirstItem.css({
                width:this.setting.posterWidth,
                height:this.setting.posterHeight,
                left:w,
                top:0,
                zIndex:Math.floor(this.posterItems.size()/2)
            });
        },

        //获取人工配置参数
        getSetting:function(){            
            var setting = this.poster.attr("data-setting");
            if(setting && setting != ""){
                return $.parseJSON(setting);
            }else{
                return {};
            };
        }    
    };

    Carousel.init = function(posters){
        var _this_ = this;
        posters.each(function(){
            // console.log("halo Louis;")
            new  _this_($(this));
        });
    };

    //挂载到window下
    window.Carousel = Carousel;

})(jQuery);

运行可知其效果如下