你的位置:首页 > 软件开发 > Java > 试着给jQuery的一个Carousel插件添加新的功能

试着给jQuery的一个Carousel插件添加新的功能

发布时间:2016-04-18 11:00:04
前几日在网上看到了一个关于Carousel插件的教学视频,于是也顺便跟着学习着做了一下。但是在做完之后发现,在别的网站上面看到类似的效果要比现在做的这个要多一个功能,也就是在底下会有一些按钮,当鼠标放上去或者点击之后,Carousel就会吧跟这个按钮相同下标的li作为第一帧显示。 ...

前几日在网上看到了一个关于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);       }    },

原标题:试着给jQuery的一个Carousel插件添加新的功能

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录