网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 jQuery 如何给Carousel插件添加新的功能
内容
    本文是小编自己写的一个给carousel插件添加新功能，关于Carousel插件的教学视频。参考别的网站，当鼠标放在下排按钮上或者点击之后，Carousel就会跟这个按钮相同下标的li作为第一帧显示。
    所有的代码都在这里https://github.com/wwervin72/jQuery-Carousel
    那么说干就干，首先我们要做的就是要把这些按钮显示出来。于是我们就需要在Carousel的原型对象prototype上添加一个方法，用于生成切换幻灯片的按钮。
    switchSlideBtn : function(){
    var slideNum = this.posterItems.size(); //获得当前的这个carousel对象的总共的帧数
    var str = '';
    var firstBtnLeft = (this.setting.width-(slideNum-1)*15-slideNum*15)/2; //规定第一个按钮放的位置
    for(var i = 0; i<slideNum; i++){
    str += '<button></button>'; //把每一个btn的代码添加到str字符串中，然后一次性添加到selBtn这里面，避免多次修改DOM
    }
    $('#selBtn').html(str);
    for(var i = 0;i<slideNum; i++){
    $('#selBtn .btn').eq(i).css('left' , firstBtnLeft+i*30);
    }
    },
    然后我们需要在Carousel这个构造函数里面运行这个方法
    this.switchSlideBtn();
    那么到了这里，我们的选择按钮就已经添加好了。现在要做的就是给这每一个按钮添加一个鼠标放上去的事件。
    $('#selBtn .btn').each(function(){
    $(this).hover(function(){
    if(self.rotateFlag){
    self.switchSlide(this);
    }
    },function(){
    });
    })
    然后我们也需要再给Carousel的原型对象添加一个切换幻灯片的方法，因为在HTML代码中我们用的li然后里面放的是a、Img标签，所以下面的Li也就是Carousel的每一帧。
    //用切换幻灯片的按钮切换幻灯片的方法
    switchSlide : function(btn){
    var self = this;
    var BtnIndex = $(btn).index(); //获得当前是哪一个按钮执行事件
    $('#selBtn .btn').css('background','rgba(255,255,255,.3)');
    $('#selBtn .btn').eq(BtnIndex).css('background','rgba(255,255,255,1)');
    var level = Math.floor(this.posterItems.size()/2),
    posterItemsLength = this.posterItems.size(),
    index;
    $('.poster-item').filter(function(i,item){
    if($(this).css('z-index') == level){ //获得当前显示的第一帧的下标
    index = i;
    }
    });
    var nextTime = BtnIndex-index; //向左旋转nextTime次
    var arr = [],zIndexArr=[];
    for(var i = 0;i < posterItemsLength;i++){
    arr.push(i);
    }
    arr = arr.concat(arr); //添加一个数组，用来模拟Li的下标
    if(nextTime > 0){ //prev 左旋转,把数组的后半部分向前移动nextTime个下标
    self.rotateFlag = false; //注意这里吧self.rotateFlag这个标识放在里面来修改了。
    this.posterItems.each(function(i, item){
    var posterItemIndex = arr.lastIndexOf(i); //获得li节点在arr中对应的下标
    var tag = $(self.posterItems[arr[posterItemIndex-nextTime]]),
    width = tag.width(),
    height = tag.height(),
    zIndex = tag.css('zIndex'),
    opacity = tag.css('opacity'),
    left = tag.css('left'),
    top = tag.css('top');
    zIndexArr.push(zIndex);
    $(item).animate({
    width : width,
    height : height,
    opacity : opacity,
    left : left,
    top : top
    },self.setting.speed,function(){
    self.rotateFlag = true; //在每一个帧的动画都执行完毕之后，self.rotateFlag改为true，才能执行下一次动画
    });
    });
    self.posterItems.each(function(i){
    $(this).css('zIndex',zIndexArr[i]); //把这个z-index提出来单独改变是为了让z-index这个属性的改变最先执行，并且不需要动画
    });
    }
    if(nextTime < 0){ //next 右旋转,把数组的前半部分向后移动nextTime的绝对值个下标
    self.rotateFlag = false;
    this.posterItems.each(function(i, item){
    var posterItemIndex = arr.indexOf(i), //获得li节点在arr中对应的下标
    tag = $(self.posterItems[arr[posterItemIndex+Math.abs(nextTime)]]),
    width = tag.width(),
    height = tag.height(),
    zIndex = tag.css('zIndex'),
    opacity = tag.css('opacity'),
    left = tag.css('left'),
    top = tag.css('top');
    zIndexArr.push(zIndex);
    $(item).animate({
    width : width,
    height : height,
    opacity : opacity,
    left : left,
    top : top
    },self.setting.speed,function(){
    self.rotateFlag = true;
    });
    });
    self.posterItems.each(function(i){
    $(this).css('zIndex',zIndexArr[i]);
    });
    }
    },
    在这里主要遇到了两个问题：
    1、如何来获得Carousel中的每一帧在移动之后的下标，然后再把相应下标的属性，添加到相应帧上。
    我这里根据li的长度，来创建一个元素为0-li.length-1的数组，并且再concat本身一次，用里面的元素来标识每一帧移动过后的下标，如果是Carousel需要向左旋转，也就是按钮的下标大于当前的第一帧的下标，那么我们就需要吧这个数组的后半部分作为每一帧的下标，并且向左移动(按钮下标-当前第一帧下标)个位置，然后这个位置的元素就是每一帧的在旋转过后的下标。若果是向右旋转也是类似。不过就需要把数组的前半部分，先后移动了。
    2、当我们用鼠标在按钮上飞速的移动的时候就会出现一些BUG，这是因为再上一个动画还没执行完毕，下一个事件又被触发了。
    那么这里我们就需要用一个标识来限制事件的执行，也就是这里的self.rotateFlag。但是在我经过多次的测试之后，发现吧这个标识赋值为false的语句不能放在旋转的方法前面，这样也会出现问题，当我们把它放置在方法里面的if条件语句的开头的时候，基本上就没什么问题了。
    好了到了这里Carousel扩展的功能就介绍完了。其他的部分就不做介绍了，有兴趣的朋友可以去上面我给出的地址download下来看看。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/14 18:42:07