zoukankan      html  css  js  c++  java
  • JQuery——banner旋转木马效果

    博主在浏览网页时无意间发现了一种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,
                        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({
                    this.setting.width,
                    height:this.setting.height
                });
                this.posterItemMain.css({
                    this.setting.width,
                    height:this.setting.height
                });
                //计算上下切换按钮的宽度
                var w = (this.setting.width-this.setting.posterWidth)/2;
                //设置切换按钮的宽高,层级关系
                this.nextBtn.css({
                    w,
                    height:this.setting.height,
                    zIndex:Math.ceil(this.posterItems.size()/2)
                });
                this.prevBtn.css({
                    w,
                    height:this.setting.height,
                    zIndex:Math.ceil(this.posterItems.size()/2)
                });            
                this.posterFirstItem.css({
                    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);

    运行可知其效果如下

  • 相关阅读:
    在 Delphi 下使用 DirectSound (8): IDirectSound8.DuplicateSoundBuffer() 与 IDirectSoundBuffer.GetStatus()
    在 Delphi 下使用 DirectSound (10): 测试合唱效果器 IDirectSoundFXChorus8
    在 Delphi 下使用 DirectSound (7): 播放资源文件中的 Wave 数据
    在 Delphi 下使用 DirectSound (13): 测试回声效果器 IDirectSoundFXEcho8
    The process could not execute 'sp_replcmds' on ‘Server Name’
    C盘空间用完竟然造成applicationHost.config文件内容为空
    推荐阅读20101018
    SQL Server 2008 R2作业中无法新建与修改步骤的问题
    ASP.NET中获取URL重写前的原始地址
    在.NET 4中用IIS部署WCF就这么简单
  • 原文地址:https://www.cnblogs.com/huixin520/p/7078571.html
Copyright © 2011-2022 走看看