1 //首页无缝轮播 2 ; 3 (function($, window, document, undefined) { 4 5 $.fn.slider = function(options) { 6 7 var defaults = { //默认参数 8 delay: 3000, //间隔 9 speed: 600, //速度 10 auto: false, //自动否 11 shiying: false //适应否 12 13 }; 14 15 var settings = $.extend({}, defaults, options); //合并参数 ｛｝防覆盖 16 17 var _this = this; 18 var li = _this.find('li'); 19 var w = li.eq(0).width(); 20 var len = li.length - 1; 21 var index = 0; 22 var autoPlay; 23 24 function init() { 25 if(settings.shiying) { 26 27 shiying(); 28 29 }; 30 31 left(); 32 right(); 33 if(settings.auto) { 34 35 auto(); 36 37 }; 38 39 } 40 41 init(); 42 43 function shiying() { 44 45 var wid = $(document.body).outerWidth(true) + 17; 46 li.width(wid); 47 alert(wid); 48 $(window).resize(function() { 49 wid = $(document.body).outerWidth(true) + 17; 50 li.width(wid); 51 52 }) 53 54 var data_src = []; 55 for(var i = 0; i < li.length; i++) { 56 57 data_src.push(li.eq(i).find("img").attr("src")); 58 59 li.eq(i).css({ 60 'background': 'url(' + data_src[i] + ') no-repeat center center' 61 }); 62 63 } 64 65 li.find('img').remove(); 66 67 }; 68 69 function left() { 70 71 _this.find('.arrow_left').on('click', function() { 72 73 if(_this.find('ul').is(":animated")) { 74 return; 75 }; 76 77 play(); 78 79 }); 80 81 }; 82 83 function right() { 84 85 _this.find('.arrow_right').on('click', function() { 86 if(_this.find('ul').is(":animated")) { 87 return; 88 }; 89 90 if(index < 1) { 91 92 _this.find('ul').append(li.eq(len).clone()); 93 94 _this.find('ul').css({ 95 'marginLeft': -w * (len + 1) 96 }); //此处clone了一个新的 所以需要加一 97 98 index = len; 99 _this.find('.dots span').eq(index).addClass('active').siblings().removeClass('active'); 100 101 _this.find('ul').stop().animate({ 102 'marginLeft': -w * index 103 }, function() { 104 105 _this.find('li:last').remove(); 106 107 }); 108 109 } else { 110 111 index--; 112 113 _this.find('ul').stop().animate({ 114 'marginLeft': -w * index 115 }); 116 117 _this.find('.dots span').eq(index).addClass('active').siblings().removeClass('active'); 118 119 } 120 121 }); 122 123 }; 124 125 function play() { 126 127 if(index > len - 1) { 128 index++; 129 130 _this.find('ul').prepend(li.eq(0).clone()); 131 132 _this.find('ul').stop().animate({ 133 'marginLeft': -w * index 134 }, function() { 135 _this.find('ul').css({ 136 'marginLeft': 0 137 }); 138 _this.find('li:first').remove(); 139 index = 0; 140 _this.find('.dots span').eq(index).addClass('active').siblings().removeClass('active'); 141 142 }); 143 144 } else { 145 index++; 146 _this.find('.dots span').eq(index).addClass('active').siblings().removeClass('active'); 147 148 _this.find('ul').stop().animate({ 149 'marginLeft': -w * index 150 }); 151 152 } 153 154 }; 155 156 function auto() { 157 158 autoPlay = setInterval(play, settings.delay); 159 160 }; 161 162 function dots() { 163 164 var $dots = $('<div class="dots"></div>'); 165 166 for(var i = 0; i < li.length; i++) { 167 168 var dot_span = $('<span></span>'); 169 170 $dots.append(dot_span); 171 } 172 173 _this.append($dots); 174 $('.dots span:first').addClass('active'); 175 176 _this.find('.dots span').on('click', function() { 177 178 $(this).addClass('active').siblings().removeClass('active'); 179 var index_dot = $(this).index(); 180 181 //alert(index_dot); 182 index = index_dot; 183 184 _this.find('ul').stop().animate({ 185 'marginLeft': -w * index 186 }); 187 188 }); 189 190 } 191 192 dots(); 193 194 _this.hover(function() { 195 196 clearInterval(autoPlay); 197 198 }, function() { 199 200 autoPlay = setInterval(play, settings.delay); 201 202 } 203 204 ) 205 206 }; 207 208 })(jQuery, window, document);
借着上次的小项目，自己做了一个小的轮播插件，实现了，但是还有有许多的问题。
一时响应式时有问题，图片不能跟随,后续我会尝试用unslider里的imgReload方法进行改进，这里做一个标记.
imgReload
function imgReload() { var imgHeight = 0; var wtmp = $("body").width(); $("#banner ul li").each(function(){ $(this).css({wtmp + "px"}); }); $(".sliderimg").each(function(){ $(this).css({wtmp + "px"}); imgHeight = $(this).height(); }); } $(window).resize(function(){imgReload();});
然后是init方法，自己完全是瞎搞。
后续会尝试用面向对象的方法去改造。