1、本来计划自己写个插件，憋了半天没写出来，那就改写吧
2、用过的图片轮播插件中最简单的应该是unslider.js了，这个插件非常小，功能还行。不过有个地方很难令人满意，就是图片播放到最后一张，再播放下一张会立刻回退到第一张。今天就是动手改成比较令人满意的正常播放
1 (function($) { 2 var mySlider = function(){ 3 var _ = this; 4 5 _.o = { 6 items: '>ul', 7 item: '>li', 8 keys: true, 9 delay: 1000, 10 speed: 1000, 11 easing: 'swing', 12 dots: true, 13 arrows: true, 14 prev: '←', 15 next: '→', 16 autoplay: true, 17 pause: true 18 }; 19 20 _.init = function(el, options){ 21 _.el = el; 22 _.ul = el.find(_.o.items); 23 _.max = [el.outerWidth() | 0, el.outerHeight() | 0]; 24 _.li = _.ul.find(_.o.item).each(function(index){ 25 var me = $(this), 26 width = me.outerWidth(), 27 height = me.outerWidth; 28 29 _.max[0] = width > _.max[0] ? _.max[0]; 30 _.max[1] = height > _.max[1] ? height:_.max[1]; 31 }); 32 33 var o = _.o, ul = _.ul, li = _.li, len = li.length; 34 _.i = 0; 35 el.css({_.max[0], height:li.first().outerHeight(), overflow:'hidden'}); 36 ul.css({position:'relative', left:(-100+'%'), ((len+2) * 100) + '%'}); 37 li.css({'float':'left', (_.max[0]) + 'px'}); 38 ul.append(li.eq(0).clone(true)); 39 ul.prepend(li.eq(li.length - 1).clone(true)); 40 41 o.autoplay && setTimeout(function() { 42 if (o.delay | 0) { 43 _.play(); 44 45 if (o.pause) { 46 el.on('mouseover mouseout', function(e) { 47 _.stop(); 48 e.type === 'mouseout' && _.play(); 49 }); 50 }; 51 }; 52 }, o.init | 0); 53 54 o.dots && nav('dot'); 55 56 o.arrows && nav('arrow'); 57 }; 58 59 _.to = function(index, callback){ 60 //若当前正在动画 61 if(_.t){ 62 _.stop(); 63 _.play(); 64 } 65 66 var o = _.o, el = _.el, ul = _.ul, li = _.ul.find(_.o.item), current = _.i, target = li.eq(index + 1); 67 68 var speed = callback ? 5 :o.speed | 0, 69 easing = o.easing, 70 obj = {height:target.outerHeight()}; 71 72 if(!ul.queue('fx').length){ 73 var realIndex; 74 if(index < 0){ 75 realIndex = li.length - 3; 76 }else if(index == li.length - 2){ 77 realIndex = 0; 78 }else{ 79 realIndex = index; 80 } 81 el.find('.dot').eq(realIndex).addClass('active').siblings().removeClass('active'); 82 el.animate(obj, speed, easing) && ul.animate( 83 $.extend({left: '-' + (index+1) + '00%'}, obj), speed, easing, function(data) { 84 if(index == li.length - 2){ 85 ul.css('left', '-100%'); 86 }else if(index < 0){ 87 ul.css('left', '-' + (li.length - 2) + '00%'); 88 } 89 _.i = realIndex; 90 $.isFunction(o.complete) && !callback && o.complete(el, target); 91 } 92 ); 93 } 94 }; 95 96 _.play = function(){ 97 _.t = setInterval(function(){ 98 _.to(_.i + 1); 99 }, _.o.delay | 0); 100 }; 101 102 _.stop = function(){ 103 _.t = clearInterval(_.t); 104 return _; 105 }; 106 107 _.next = function(){ 108 return _.stop().to(_.i + 1); 109 }; 110 111 _.prev = function(){ 112 return _.stop().to(_.i - 1); 113 }; 114 115 function nav(name, html){ 116 if(name == 'dot'){ 117 html = '<ol class="dots">'; 118 $.each(_.li, function(index){ 119 html += '<li class="'+(index === _.i ? name+' active':name)+'">' + ++index + '</li>'; 120 }); 121 html += '</ol>'; 122 }else{ 123 html = '<div class="'; 124 html = html + name + 's">' + html + name + ' prev">' + _.o.prev + '</div>' + html + name+' next">'+_.o.next+'</div></div>'; 125 } 126 127 _.el.addClass('has-'+name+'s').append(html).find('.'+name).click(function(){ 128 var me = $(this); 129 me.hasClass('dot') ? _.stop().to(me.index()) : me.hasClass('prev')? _.prev() : _.next(); 130 }); 131 } 132 133 }; 134 135 $.fn.myslider = function(options){ 136 (new mySlider).init($(this), options); 137 }; 138 })(jQuery);
页面中调用代码如下：
1 <!doctype html> 2 <html> 3 <head> 4 <title>xxxx</title> 5 <meta charset="utf-8"> 6 <style> 7 #slider{ 8 position:relative; 9 overflow:hidden; 10 width:640px; 11 } 12 ul,ol{ 13 padding:0; 14 margin:0; 15 text-align:center; 16 } 17 .dots { position: absolute; left: 0; right: 0; bottom: 20px;} 18 .dots li 19 { 20 display: inline-block; 21 width: 10px; 22 height: 10px; 23 margin: 0 4px; 24 text-indent: -999em; 25 border: 2px solid #fff; 26 border-radius: 6px; 27 cursor: pointer; 28 opacity: .4; 29 transition: background .5s, opacity .5s; 30 } 31 .dots li.active 32 { 33 background: #fff; 34 opacity: 1; 35 } 36 .arrow{ 37 position:absolute; 38 top:220px; 39 cursor:pointer; 40 width:20px; 41 height:35px; 42 text-indent:-999em; 43 } 44 .arrows .prev{ 45 left:15px; 46 background:url("arrowl.png"); 47 } 48 .arrows .next{ 49 right:15px; 50 background:url("arrowr.png"); 51 } 52 </style> 53 </head> 54 <body> 55 <div id="slider"> 56 <ul> 57 <li><img src="01.jpg"></li> 58 <li><img src="02.jpg"></li> 59 <li><img src="03.jpg"></li> 60 <li><img src="04.jpg"></li> 61 <li><img src="05.jpg"></li> 62 </ul> 63 </div> 64 <script src="jquery-1.9.1.js"></script> 65 <script src="myslider.js"></script> 66 <script> 67 $("#slider").myslider(); 68 </script> 69 </body> 70 </html>
这样就比较令人满意了