首页 > 代码库 > 【图片轮播特效插件】--- 效果实现
【图片轮播特效插件】--- 效果实现
忙了一段时间，终于能好好静下来写这篇博文了，那废话就不多说，直接开始吧。
按照上一篇对于jQuery插件的学习掌握，首先就是搭好一个合适的框架，定好插件中需要用到的属性，给其他使用者留出使用接口：
1 (function($){ 2 //各种默认的属性参数 3 var defaults = { 4 width: 400, 5 height: 200, 6 direction:‘left‘, 7 imgs:[{ 8 src:‘p0.jpg‘, 9 link:‘http://www.cnblogs.com/bikeway‘10 },{11 src:‘p1.jpg‘,12 link:‘http://www.cnblogs.com/bikeway‘13 },{14 src:‘p2.jpg‘,15 link:‘http://www.cnblogs.com/bikeway‘16 }]17 }18 19 //提供插件唯一可调用的接口slideImg20 $.fn.slideImg = function(options){21 options = $.extend({},defaults,options);22 return this.each(function(){23 init($(this),options);24 })25 };26 })(jQuery);
这里我默认了插件显示时的宽、高、滚动方向以及三张图片(图片默认链接到我的博客首页)
这里需要说的是return this.each(function(){......}),
但也可以这样写：
$.fn.slideImg = function(options){
this.each(funciton){
//code........
}
}
这里我比较喜欢以及推荐第一种写法，因为jQuery有一个很棒的特点就是可以进行方法级联，我们应该始终在方法中返回一个元素。并且每一方法块都能很好的区分开，代码看起也很舒服。
然后便是初始化写好的插件
1 function init(obj,options){ 2 var imgs = "<div class=‘imgBox‘>", 3 tips = "<div class=‘tipBox‘>", 4 len = options.imgs.length; 5 for(var i = 0; i < len; i++){ 6 if(options.imgs[i].link){ 7 imgs += "<a href=http://www.mamicode.com/‘"+options.imgs[i].link+"‘>"; 8 imgs += "<img src=http://www.mamicode.com/‘"+options.imgs[i].src+"‘/>"; 9 imgs += "</a>";10 }else{11 imgs += "<img src=http://www.mamicode.com/‘"+options.imgs[i].src+"‘/>"; 12 }13 tips += "<a href=‘javascript:void(0)‘></a>"14 }15 imgs += "</div>";16 tips += "</div>";17 18 $(obj).append(imgs).append(tips);19 $(‘.tipBox a‘).eq(0).addClass(‘current‘);20 $(obj).css({21 ‘width‘:options.width,22 ‘height‘:options.height23 });24 25 $(‘.imgBox a‘).css({26 ‘width‘:options.width,27 ‘height‘:options.height28 });29 30 $(‘.imgBox img‘).css({31 ‘width‘:options.width,32 ‘height‘:options.height33 });34 35 $(‘.tipBox‘).css({36 ‘left‘:(options.width - 11 * len - 10) / 237 })38 39 if(options.direction == ‘top‘ || options.direction == ‘bottom‘){40 $(‘.imgBox a‘).css({41 ‘display‘:‘block‘42 })43 $(‘.imgBox‘).css({44 ‘width‘:‘100%‘,45 ‘height‘:options.height * len46 })47 }else{48 $(‘.imgBox‘).css({49 ‘width‘:options.width * len,50 ‘height‘:‘100%‘51 })52 }53 54 55 var dir = options.direction;56 switch(dir){57 case ‘top‘:{58 setInterval(function(){autoSlideTop(options)},3000);59 break;60 }61 case ‘right‘:{62 setInterval(function(){autoSlideRight(options)},3000);63 break;64 }65 case ‘bottom‘:{66 setInterval(function(){autoSlideBottom(options)},3000);67 break;68 }69 case ‘left‘:{70 setInterval(function(){autoSlideLeft(options)},3000);71 break; 72 }73 }74 }
这段代码中我省略了许多为滚动标记设置样式的代码，只设置了不影响插件效果所必须的样式（而且我喜欢用jQuery的方式设置样式，而不是写在标签里，我觉得这样修改会较为方便）。在demo中我会单独写个slideImg.css文件，作为这个插件的默认样式。
最后便是关键的效果实现部分，这里我贴出的代码只包含了向左滚动的部分
1 var index = 0; 2 function autoSlideLeft(options){ 3 if($(‘.imgBox‘).position().left == -options.width * (options.imgs.length - 1)){ 4 index = 0; 5 $(‘.imgBox‘).animate({left: ‘0‘},1000); 6 $(‘.tipBox a‘).each(function(i){ 7 if (index == i) { 8 $(this).addClass(‘current‘);
9 }else{10 $(this).removeClass(‘current‘);
11 }12 })13 }else{14 index++;15 $(‘.imgBox‘).animate({left: "-="+options.width,},1000);16 $(‘.tipBox a‘).each(function(i){17 if (index == i) {18 $(this).addClass(‘current‘);
19 }else{20 $(this).removeClass(‘current‘);
21 }22 })23 }24 }
到此滚动插件已经初步完成，实现了上篇随笔定下的三个功能，下一篇我希望能优化下代码，再加上touch事件。
效果图：
滚动时截图：
最后附上本次实现的【图片轮播特效插件】
demo
【图片轮播特效插件】--- 效果实现
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。