码迷，mamicode.com
首页 > Web开发 > 详细

jQuery仿3D旋转木马效果插件(带索引按钮)

时间：2016-12-12 11:53:51      阅读：349      评论：0      收藏：0      [点我收藏+]

标签：cron   body   下标   lin   title   cal   dir   pre   win   

项目中需要用到旋转木马效果，但是我在网上找的插件，基本都是不带按钮或者只是带前后按钮的，而项目要求的是带索引按钮，也就是说有3张图片轮播，对应的要有3个小按钮，点击按钮，对应的图片位于中间位置。于是就在jQuery的一款插件jquery.carousel.js的基础上进行了一些改进，不足的是，固定就是3张图片。

代码：

html

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery自动轮播旋转木马插件</title>
    <link type="text/css" rel="stylesheet" href="css/carousel.css">
    <style type="text/css">
        .caroursel{margin:150px auto;}
        /*body{background-color: #2A2A2A;}*/
    </style>
    <!--[if IE]>
        <script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
</head>
<body>
    <article class="jq22-container">
        
        <div class = "caroursel poster-main" data-setting = ‘{
            "width":1000,
            "height":270,
            "posterWidth":640,
            "posterHeight":270,
            "scale":0.8,
            "dealy":"2000",
            "algin":"middle"
        }‘>
            <ul class = "poster-list">
                <li class = "poster-item"><img src="image/a1.png" width = "100%" height="100%"></li>
                <li class = "poster-item"><img src="image/a2.png" width = "100%" height="100%"></li>
                <li class = "poster-item"><img src="image/a3.png" width = "100%" height="100%"></li>
            </ul>

            <div class = "poster-btn poster-first-btn"></div>
            <div class = "poster-btn poster-second-btn"></div>
            <div class = "poster-btn poster-third-btn"></div>
            
            <div class = "poster-btn poster-prev-btn"> < </div>
            <div class = "poster-btn poster-next-btn"> > </div>

        </div>
        
    </article>
    
    <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/jquery.carousel-1.js"></script>
    <script>
        Caroursel.init($(‘.caroursel‘))
    </script>
</body>
</html>

css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content: ;}
abbr,acronym{border:0;}
body{color:#666; background-color:#fff;}
.clearfix:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix {zoom:1;}

.poster-main{position: relative;width: 900px;height: 270px}
.poster-main a,.poster-main img{display:block;}
.poster-main .poster-list{width: 900px;height: 270px}
.poster-main .poster-list .poster-item{position: absolute;left: 0px;top: 0px}

.poster-main .poster-btn{
    cursor: pointer;
    position: absolute;
    top:290px;
    width:14px !important;
    height:14px !important;
    text-align: center;
    line-height: 14px;
    color: #ffffff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #808080;
    z-index: 10;
}
.poster-main .poster-prev-btn{
    left: 40%;
}
.poster-main .poster-next-btn{
    left: 56%;
}

.poster-main .poster-first-btn{
    left: 45%;
}
.poster-main .poster-second-btn{
    left: 48%;
}
.poster-main .poster-third-btn{
    left: 51%;
}
.poster-main .poster-btn-active{
    background-color: #000000;
}

JS：

;(function($){
    var Caroursel = function (caroursel){
        var self = this;
        this.caroursel = caroursel;
        this.posterList = caroursel.find(".poster-list");
        this.posterItems = caroursel.find(".poster-item");
        this.firstPosterItem = this.posterItems.first();
        this.lastPosterItem = this.posterItems.last();
        this.prevBtn = this.caroursel.find(".poster-prev-btn");
        this.nextBtn = this.caroursel.find(".poster-next-btn");

        this.firstBtn = this.caroursel.find(".poster-first-btn");
        this.secondBtn = this.caroursel.find(".poster-second-btn");
        this.thirdBtn = this.caroursel.find(".poster-third-btn");
        this.buttonItems = [this.firstBtn,this.secondBtn,this.thirdBtn];

        //每个移动元素的位置索引,用于记录每个元素当前的位置,在每次移动的时候,该数组的值都会发生变化
        //值为1 表示在中间 2:在zuo边 3:在you边
        //数组的下标对应li元素的位置索引
        this.curPositions = [1,2,3];

        this.setting = {
            "width":"900",
            "height":"300",
            "posterWidth":"300",
            "posterHeight":"200",
            "scale":"0.8",
            "speed":"1000",
            "isAutoplay":"true",
            "dealy":"1000"
        };

        $.extend(this.setting,this.getSetting());

        this.setFirstPosition();

        this.setSlicePosition();

        this.refreshCss();

        this.rotateFlag = true;
        this.prevBtn.bind("click",function(){
            if(self.rotateFlag){
                self.rotateFlag = false;
                self.rotateAnimate("left")
            }
        });

        
        //绑定位置按钮事件
        this.firstBtn.bind("click",function(){
            console.log(this);
            self.clickPosButtonIndex(0);
        });
        this.secondBtn.bind("click",function(){
            self.clickPosButtonIndex(1);
        });
        this.thirdBtn.bind("click",function(){
            self.clickPosButtonIndex(2);
        });


        this.nextBtn.bind("click",function(){
            if(self.rotateFlag){
                self.rotateFlag = false;
                self.rotateAnimate("right")
            }
        });
        if(this.setting.isAutoplay){
            this.autoPlay();
            this.caroursel.hover(function(){clearInterval(self.timer)},function(){self.autoPlay()})
        }
    };
    Caroursel.prototype = {
        autoPlay:function(){
          var that = this;
          this.timer =  window.setInterval(function(){
              that.nextBtn.click();
          },that.setting.dealy)
        },


        refreshCss:function(){
            var curFirstPos;//当前位于中间的li元素位置
            for( i = 0; i < this.buttonItems.length; ++i)
            {
                var curButton = this.buttonItems[i];
                var curPos = this.curPositions[i];
                if(curPos == 1){
                    curButton.addClass(‘poster-btn-active‘);
                }
                else
                {
                    curButton.removeClass(‘poster-btn-active‘);
                }
            }
            console.log(‘after refresh claass‘);
        },

        //记录每次移动的状态
        refreshPositions:function(offset){
            console.log(‘before refreshPositions‘,this.curPositions);
            for( i = 0; i < this.curPositions.length; ++i)
            {
                var nextPos = this.curPositions[i] + offset;
                if (nextPos > this.curPositions.length) {//移动超过末尾,则位置变成到开头
                    nextPos = 1;
                }else 
                 if (nextPos < 1) {////向左边移动已经移动到开始位置更左边,则位置变成结束
                     nextPos = this.curPositions.length;
                 }
                this.curPositions[i] = nextPos;
            }
            console.log(‘after refreshPositions‘,this.curPositions);
            this.refreshCss();
        },
        //点击位置按钮,根据点击的按钮索引 决定向左还是向右移动[因为只有三个位置,该方法能够仅靠向左或向右就能将
        //指定的位置移动到中间]
        clickPosButtonIndex:function(index){
            console.log(‘click the index ‘ + index);
            var self = this;
            if(self.rotateFlag == false) {//目前正在移动等移动结束后才能进入
                return;
            }

            var curPos = this.curPositions[index];
            console.log(‘cur pos‘ + curPos);

            var moveDirection = null;
            if(curPos == 2){//目标位置现在 在zuo边,要移动到中间 只需要向左边移动一次
                moveDirection = "right";
            }else
                if(curPos == 3){//目标位置现在在you边,向右边移动一次
                    moveDirection = "left";
                }

            if(moveDirection != null){
                console.log(‘move to ‘ + moveDirection);
                self.rotateFlag = false;
                self.rotateAnimate(moveDirection)
            }
        },

        rotateAnimate:function(type){
            var that = this;
            var zIndexArr = [];
            if(type == "left"){//将posterItems的每个元素移动到下一个元素所在的位置
                this.posterItems.each(function(){
                   var self = $(this),
                    prev = $(this).next().get(0)?$(this).next():that.firstPosterItem,
                    width = prev.css("width"),
                    height = prev.css("height"),
                    zIndex = prev.css("zIndex"),
                    opacity = prev.css("opacity"),
                    left = prev.css("left"),
                    top = prev.css("top");
                    zIndexArr.push(zIndex);
                    self.animate({
                        "width":width,
                        "height":height,
                        "left":left,
                        "opacity":opacity,
                        "top":top
                    },that.setting.speed,function(){
                        that.rotateFlag = true;
                    });
                });
                this.posterItems.each(function(i){
                    $(this).css("zIndex",zIndexArr[i]);
                });
                this.refreshPositions(1);
            }
            if(type == "right"){////将posterItems的每个元素移动到下上一个元素所在的位置
                this.posterItems.each(function(){
                    var self = $(this),
                    next = $(this).prev().get(0)?$(this).prev():that.lastPosterItem,
                        width = next.css("width"),
                        height = next.css("height"),
                        zIndex = next.css("zIndex"),
                        opacity = next.css("opacity"),
                        left = next.css("left"),
                        top = next.css("top");
                        zIndexArr.push(zIndex);
                    self.animate({
                        "width":width,
                        "height":height,
                        "left":left,
                        "opacity":opacity,
                        "top":top
                    },that.setting.speed,function(){
                        that.rotateFlag = true;
                    });
                });
                this.posterItems.each(function(i){
                    $(this).css("zIndex",zIndexArr[i]);
                });
                this.refreshPositions(-1);
            }
        },
        setFirstPosition:function(){
            this.caroursel.css({"width":this.setting.width,"height":this.setting.height});
            this.posterList.css({"width":this.setting.width,"height":this.setting.height});
            var width = (this.setting.width - this.setting.posterWidth) / 2;

            this.prevBtn.css({"width":width , "height":this.setting.height,"zIndex":Math.ceil(this.posterItems.size()/2)});
            this.nextBtn.css({"width":width , "height":this.setting.height,"zIndex":Math.ceil(this.posterItems.size()/2)});
            this.firstPosterItem.css({
                "width":this.setting.posterWidth,
                "height":this.setting.posterHeight,
                "left":width,
                "zIndex":Math.ceil(this.posterItems.size()/2),
                "top":this.setVertialType(this.setting.posterHeight)
            });
        },
        setSlicePosition:function(){
            var _self = this;
            var sliceItems = this.posterItems.slice(1),
                level = Math.floor(this.posterItems.length/2),
                leftItems = sliceItems.slice(0,level),
                rightItems = sliceItems.slice(level),
                posterWidth = this.setting.posterWidth,
                posterHeight = this.setting.posterHeight,
                Btnwidth = (this.setting.width - this.setting.posterWidth) / 2,
                gap = Btnwidth/level,
                containerWidth = this.setting.width;

            var i = 1;
            var leftWidth = posterWidth;
            var leftHeight = posterHeight;
            var zLoop1 = level;
            leftItems.each(function(index,item){
                leftWidth = posterWidth * _self.setting.scale;
                leftHeight = posterHeight*_self.setting.scale;
                $(this).css({
                    "width":leftWidth,
                    "height":leftHeight,
                    "left": Btnwidth - i*gap,
                    "zIndex":zLoop1--,
                    "opacity":1/(i+1),
                    "top":_self.setVertialType(leftHeight)
                });
                i++;
            });

            var j = level;
            var zLoop2 = 1;
            var rightWidth = posterWidth;
            var rightHeight = posterHeight;
            rightItems.each(function(index,item){
                var rightWidth = posterWidth * _self.setting.scale;
                var rightHeight = posterHeight*_self.setting.scale;
                $(this).css({
                    "width":rightWidth,
                    "height":rightHeight,
                    "left": containerWidth -( Btnwidth - j*gap + rightWidth),
                    "zIndex":zLoop2++,
                    "opacity":1/(j+1),
                    "top":_self.setVertialType(rightHeight)
                });
                j--;
            });
        },
        getSetting:function(){
            var settting = this.caroursel.attr("data-setting");
            if(settting.length > 0){
                return $.parseJSON(settting);
            }else{
                return {};
            }
        },
        setVertialType:function(height){
            var algin = this.setting.algin;
            if(algin == "top") {
                return 0
            }else if(algin == "middle"){
                return (this.setting.posterHeight - height) / 2
            }else if(algin == "bottom"){
                return this.setting.posterHeight - height
            }else {
                return (this.setting.posterHeight - height) / 2
            }
        }
    };
    Caroursel.init = function (caroursels){
        caroursels.each(function(index,item){
            new Caroursel($(this));
        })  ;
    };
    window["Caroursel"] = Caroursel;
})(jQuery);

效果图：

技术分享

 

jQuery仿3D旋转木马效果插件(带索引按钮)

标签：cron   body   下标   lin   title   cal   dir   pre   win   

原文地址：http://www.cnblogs.com/sapho/p/6163729.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！