图片轮播

1、本来计划自己写个插件，憋了半天没写出来，那就改写吧

2、用过的图片轮播插件中最简单的应该是unslider.js了，这个插件非常小，功能还行。不过有个地方很难令人满意，就是图片播放到最后一张，再播放下一张会立刻回退到第一张。今天就是动手改成比较令人满意的正常播放

(function($) {
  var mySlider = function(){
    var _ = this;
    
    _.o = {
      items: '>ul',
      item: '>li',
      keys: true,
      delay: 1000,
      speed: 1000,
      easing: 'swing',
      dots: true,
      arrows: true,
      prev: '←',
      next: '→',
      autoplay: true,
      pause: true
    };
    
    _.init = function(el, options){
      _.el = el;
      _.ul = el.find(_.o.items);
      _.max = [el.outerWidth() | 0, el.outerHeight() | 0];
      _.li = _.ul.find(_.o.item).each(function(index){
        var me = $(this),
          width = me.outerWidth(),
          height = me.outerWidth;
        
        _.max[0] = width > _.max[0] ? width: _.max[0];
        _.max[1] = height > _.max[1] ? height:_.max[1];
      });
      
      var o = _.o, ul = _.ul, li = _.li, len = li.length;
      _.i = 0;
      el.css({width:_.max[0], height:li.first().outerHeight(), overflow:'hidden'});
      ul.css({position:'relative', left:(-100+'%'), width:((len+2) * 100) + '%'});
      li.css({'float':'left', width:(_.max[0]) + 'px'});
      ul.append(li.eq(0).clone(true));
      ul.prepend(li.eq(li.length - 1).clone(true));
      
      o.autoplay && setTimeout(function() {
                if (o.delay | 0) {
                    _.play();

                    if (o.pause) {
                        el.on('mouseover mouseout', function(e) {
                            _.stop();
                            e.type === 'mouseout' && _.play();
                        });
                    };
                };
            }, o.init | 0);
      
      o.dots && nav('dot');
      
      o.arrows && nav('arrow');
    };
    
    _.to = function(index, callback){
      //若当前正在动画
      if(_.t){
        _.stop();
        _.play();
      }
      
      var o = _.o, el = _.el, ul = _.ul, li = _.ul.find(_.o.item), current = _.i, target = li.eq(index + 1);
      
      var speed = callback ? 5 :o.speed | 0,
        easing = o.easing,
        obj = {height:target.outerHeight()};

      if(!ul.queue('fx').length){
        var realIndex;
        if(index < 0){
          realIndex = li.length - 3;
        }else if(index == li.length - 2){
          realIndex = 0;
        }else{
          realIndex = index;
        }
        el.find('.dot').eq(realIndex).addClass('active').siblings().removeClass('active');
        el.animate(obj, speed, easing) && ul.animate(
          $.extend({left: '-' + (index+1) + '00%'}, obj), speed, easing, function(data) {
            if(index == li.length - 2){
              ul.css('left', '-100%');
            }else if(index < 0){
              ul.css('left', '-' + (li.length - 2) + '00%');
            }
            _.i = realIndex;
            $.isFunction(o.complete) && !callback && o.complete(el, target);
          }
        );
      }
    };
    
    _.play = function(){
      _.t = setInterval(function(){
        _.to(_.i + 1);
      }, _.o.delay | 0);
    };
    
    _.stop = function(){
      _.t = clearInterval(_.t);
      return _;
    };
    
    _.next = function(){
      return _.stop().to(_.i + 1);
    };
    
    _.prev = function(){
      return _.stop().to(_.i - 1);
    };
    
    function nav(name, html){
      if(name == 'dot'){
        html = '<ol class="dots">';
        $.each(_.li, function(index){
          html += '<li class="'+(index === _.i ? name+' active':name)+'">' + ++index + '</li>';
        });
        html += '</ol>';
      }else{
        html = '<div class="';
        html = html + name + 's">' + html + name + ' prev">' + _.o.prev + '</div>' + html + name+' next">'+_.o.next+'</div></div>';
      }
      
      _.el.addClass('has-'+name+'s').append(html).find('.'+name).click(function(){
        var me = $(this);
        me.hasClass('dot') ? _.stop().to(me.index()) : me.hasClass('prev')? _.prev() : _.next();
      });
    }
    
  };

  $.fn.myslider = function(options){
    (new mySlider).init($(this), options);
  };
})(jQuery);

页面中调用代码如下：

<!doctype html>
<html>
<head>
<title>xxxx</title>
<meta charset="utf-8">
<style>
#slider{
  position:relative;
  overflow:hidden;
  width:640px;
}
ul,ol{
  padding:0;
  margin:0;
  text-align:center;
}
.dots { position: absolute; left: 0; right: 0; bottom: 20px;}
.dots li 
{ 
    display: inline-block; 
    width: 10px; 
    height: 10px; 
    margin: 0 4px; 
    text-indent: -999em; 
    border: 2px solid #fff; 
    border-radius: 6px; 
    cursor: pointer; 
    opacity: .4; 
    transition: background .5s, opacity .5s;
}
.dots li.active 
{
    background: #fff;
    opacity: 1;
}
.arrow{
  position:absolute;
  top:220px;
  cursor:pointer;
  width:20px;
  height:35px;
  text-indent:-999em;
}
.arrows .prev{
  left:15px;
  background:url("arrowl.png");
}
.arrows .next{
  right:15px;
  background:url("arrowr.png");
}
</style>
</head>
<body>
<div id="slider">
  <ul>
    <li><img src="01.jpg"></li>
    <li><img src="02.jpg"></li>
    <li><img src="03.jpg"></li>
    <li><img src="04.jpg"></li>
    <li><img src="05.jpg"></li>
  </ul>
</div>
<script src="jquery-1.9.1.js"></script>
<script src="myslider.js"></script>
<script>
$("#slider").myslider();
</script>
</body>
</html>

这样就比较令人满意了