图片轮播

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: '&larr;',
 15       next: '&rarr;',
 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>

这样就比较令人满意了