jquery.scroll.js 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. function RandomNum(min, max) {
  2. return Math.floor(Math.random() * (max - min) + min);
  3. }
  4. // 水平滚动插件
  5. (function ($) {
  6. $.fn.extend({
  7. Scroll: function (opt, callback) {
  8. //参数初始化
  9. if (!opt) var opt = {};
  10. var _btnRight = $("#" + opt.right); //Shawphy:向右按钮
  11. var _btnLeft = $("#" + opt.left); //Shawphy:向左按钮
  12. var timerID;
  13. var _this = this.eq(0).find("ul:first");
  14. var lineW = _this.find("li:first").width(), //获取列表宽度
  15. line = opt.line ? parseInt(opt.line, 10) : parseInt(this.width() / lineW, 10), //每次滚动的行数,默认为一屏,即父容器高度
  16. speed = opt.speed ? parseInt(opt.speed, 10) : 500; //卷动速度,数值越大,速度越慢(毫秒)
  17. timer = opt.timer //?parseInt(opt.timer,10):3000; //滚动的时间间隔(毫秒)
  18. if (line == 0) line = 1;
  19. var rightWidth = 0 - line * lineW;
  20. //滚动函数
  21. var scrollRight = function () {
  22. _btnRight.unbind("click", scrollRight);
  23. _this.animate({
  24. marginLeft: rightWidth
  25. }, speed, function () {
  26. for (i = 1; i <= line; i++) {
  27. _this.find("li:first").appendTo(_this);
  28. }
  29. _this.css({ marginLeft: 0 });
  30. _btnRight.bind("click", scrollRight);
  31. });
  32. }
  33. //Shawphy:向左翻页函数
  34. var scrollLeft = function () {
  35. _btnLeft.unbind("click", scrollLeft);
  36. for (i = 1; i <= line; i++) {
  37. _this.find("li:last").show().prependTo(_this);
  38. }
  39. _this.css({ marginLeft: rightWidth });
  40. _this.animate({
  41. marginLeft: 0
  42. }, speed, function () {
  43. _btnLeft.bind("click", scrollLeft);
  44. });
  45. }
  46. //Shawphy:自动播放
  47. var autoPlay = function () {
  48. if (timer) timerID = window.setInterval(scrollRight, timer);
  49. };
  50. var autoStop = function () {
  51. if (timer) window.clearInterval(timerID);
  52. };
  53. //鼠标事件绑定
  54. _this.hover(autoStop, autoPlay);
  55. autoPlay();
  56. var i = 0;
  57. var rd = RandomNum(0, 10);
  58. while (i++ < rd) {
  59. scrollRight();
  60. }
  61. _btnRight.css("cursor", "pointer").click(scrollRight).hover(autoStop, autoPlay);
  62. _btnLeft.css("cursor", "pointer").click(scrollLeft).hover(autoStop, autoPlay);
  63. }
  64. })
  65. })(jQuery);