最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

javascript中的轮播图插件化的封装示例

来源:懂视网 责编:小OO 时间:2020-11-27 20:16:18
文档

javascript中的轮播图插件化的封装示例

具体代码如下:代码界的小白,工作中需要多次调用左右转换的轮播图,我就给封装了。但是总感觉自己写的代码比较繁琐。方法比较笨,求大神给简洁化一下,顺便进行学习。另外如果默认值是top的话。动画效果会没有。
推荐度:
导读具体代码如下:代码界的小白,工作中需要多次调用左右转换的轮播图,我就给封装了。但是总感觉自己写的代码比较繁琐。方法比较笨,求大神给简洁化一下,顺便进行学习。另外如果默认值是top的话。动画效果会没有。

本文实例为大家分享了js轮播图的插件化封装代码,供大家参考,具体内容如下

具体代码如下:

代码界的小白,工作中需要多次调用左右转换的轮播图,我就给封装了。但是总感觉自己写的代码比较繁琐。方法比较笨,求大神给简洁化一下,顺便进行学习。 另外如果默认值是top的话。动画效果会没有。

$.fn.zuoyouzhuan = function(options) {
 this.each(function(i, ele) {
 slide(ele, options)
 })
 return this
 }
 var slide = function(ele, options) {
 var des = $.extend({
 fangxiang: 'left',
 duoshaotu: '4',
 sudu: '3000'
 }, options)
 var $ele = $(ele)
 var $ul = $ele.find('ul')
 var $li = $ele.find('li')
 var x_width = $ele.find('li').width()
 var y_height = $ele.find('li').height()
 var num = $ele.find('li').length;
 if(des.fangxiang == "top") {
 var topmar = parseInt($li.css('margin-bottom'))
 var boderw= parseInt($('li').css('border-width'))
 $ul.css({ 'heigth': (num * (y_height + topmar + boderw*2)) + 'px' });
 }
 if(des.fangxiang == "left") {
 var boderw= parseInt($('li').css('border-width'))
 var rightmar = parseInt($li.css('margin-right'))
 $ul.css({ 'width': (num * (x_width + rightmar+boderw*2)) + 'px' });
 }
 var t;
 if(num > des.duoshaotu) {
 var t = setInterval(sidebarFlipAuto, des.sudu);
 function sidebarFlipAuto() {
 if(des.fangxiang == "left") {
 $ul.stop(true, true).animate({ "left": (x_width + rightmar) + 'px' }, 300, function() {
 $ul.find('li:first').appendTo($ul);
 $ul.css("left", '0');
 });
 }
 if(des.fangxiang == "top") {
 $ul.stop(true, true).animate({ "top": (y_height + topmar) + 'px' }, 300, function() {
 $ul.find('li:first').appendTo($ul);
 $ul.css("top", '0');
 });
 }
 }
 $ul.hover(function() {
 clearInterval(t);
 }, function() {
 t = setInterval(sidebarFlipAuto, 4000);
 })
 $ele.find('span').eq(0).unbind('click').click(function() {
 $ul.find('li:last').prependTo($ul);
 if(des.fangxiang == "left") {
 $ul.css({ "left": (x_width + rightmar) + 'px' });
 $ul.stop(true, true).animate({ "left": '0' }, 300);
 }
 if(des.fangxiang == "top") {
 $ul.css({ "top": (y_height + rightmar) + 'px' });
 $ul.stop(true, true).animate({ "top": '0' }, 300);
 }
 })
 $ele.find('span').eq(1).unbind('click').click(function() {
 sidebarFlipAuto();
 })
 }

 }
 
 那个.unbind('click').click不写这个有时会执行两次,所以百度了一下这个方法。
 求简洁化。

文档

javascript中的轮播图插件化的封装示例

具体代码如下:代码界的小白,工作中需要多次调用左右转换的轮播图,我就给封装了。但是总感觉自己写的代码比较繁琐。方法比较笨,求大神给简洁化一下,顺便进行学习。另外如果默认值是top的话。动画效果会没有。
推荐度:
标签: js 封装 实例
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top