slide 幻灯

gistfile1.js

(function($) {
  $.fn.slide = function(options) {
    var defaults = {
      speed: 5000 //ms
    };
    var opts = $.extend({}, defaults, options);
    return this.each(function() {
      var _this = $(this);
      var _child = $("li", _this);
      var _length = _child.size();
      var _width = _child.width()
      var timer = null;
      var _num = 0;
      var index = 0;
      var flag = true;
      var _btn = $(".btn");
      var _list = $("li", _btn);
      _list.eq(0).css("background", "blue")
      var _animate = function() {
        flag ? index++ : index--
        if (flag) {
          _this.animate({
            left: "-" + _width * index + "px"
          }, 300);
          if (index >= _length - 1) {
            flag = false;
          };

          _list.not(index).css("background", "#fff")
          _list.eq(index).css("background", "blue")
          return;
        }
        if (!flag) {
          _this.animate({
            left: "-" + _width * index + "px"
          }, 300);
          if (index <= 0) {
            flag = true;
          };
          _list.not(index).css("background", "#fff")
          _list.eq(index).css("background", "blue")
        };
      };
      timer = setInterval(_animate, opts.speed);
      _list.each(function(index) {
        $(this).mouseover(function() {
          clearInterval(timer);
          $(this).siblings().css("background", "#fff")
          $(this).css("background", "blue")
          _this.stop(!0, !0).animate({
            left: "-" + _width * index + "px"
          }, 300)
        })
        $(this).mouseout(function() {
          timer = setInterval(_animate, opts.speed);
        });
      });
    });
  };
})(jQuery)

//usage:
$(".banner-inner").slide()