carousel.min.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. (function($) {
  2. var defaluts = {
  3. large_elem: "large_elem",
  4. small_elem: "small_elem",
  5. left_btn: "left_btn",
  6. right_btn: "right_btn",
  7. state: "on",
  8. speed: "normal",
  9. vis: 4
  10. };
  11. $.fn.extend({
  12. "thumbnailImg": function(options) {
  13. var opts = $.extend({},
  14. defaluts, options);
  15. return this.each(function() {
  16. var $this = $(this);
  17. var t = 0;
  18. $(opts.large_elem).find("ul li").eq(0).show();
  19. $(opts.small_elem).find("ul li").eq(0).addClass(opts.state);
  20. var l = $(opts.small_elem).find("ul li").length;
  21. var l_mean;
  22. if (l < opts.vis) {
  23. l_mean = 0
  24. } else {
  25. l_mean = ((parseInt(l / opts.vis) - 1) * opts.vis) + (l % opts.vis)
  26. }
  27. var w = $(opts.small_elem).find("ul li").outerWidth(true);
  28. $(opts.small_elem).find("ul").css("width", l * w + "px");
  29. $(opts.small_elem).find("ul li").click(function() {
  30. $(this).addClass(opts.state).siblings().removeClass(opts.state);
  31. t = $(this).index();
  32. Img($(this).index())
  33. });
  34. $(opts.left_btn).click(function() {
  35. var i;
  36. $(opts.small_elem).find("ul li").each(function(index) {
  37. if ($(this).hasClass(opts.state)) {
  38. i = index
  39. }
  40. });
  41. i--;
  42. if (i < 0) {
  43. i = l - 1
  44. }
  45. t = i;
  46. Img(i)
  47. });
  48. $(opts.right_btn).click(function() {
  49. var i;
  50. $(opts.small_elem).find("ul li").each(function(index) {
  51. if ($(this).hasClass(opts.state)) {
  52. i = index
  53. }
  54. });
  55. i++;
  56. if (i > l - 1) {
  57. i = 0
  58. }
  59. t = i;
  60. Img(i)
  61. });
  62. function Img(i) {
  63. $(opts.large_elem).find("ul li").eq(i).fadeIn().siblings().hide();
  64. $(opts.small_elem).find("ul li").eq(i).addClass(opts.state).siblings().removeClass(opts.state);
  65. var ml = i * w;
  66. if (ml <= l_mean * w) {
  67. $(opts.small_elem).find("ul").stop().animate({
  68. marginLeft: -ml + "px"
  69. },
  70. opts.speed)
  71. } else {
  72. $(opts.small_elem).find("ul").stop().animate({
  73. marginLeft: -(l_mean * w) + "px"
  74. },
  75. opts.speed)
  76. }
  77. }
  78. })
  79. }
  80. })
  81. })(jQuery);