jquery.nc_slider.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. ;(function($) {
  2. $.fn.nc_slider = function(options) {
  3. var defaults = {
  4. animate: 400,
  5. timeout: 5000,
  6. pagination: true,
  7. pagination_class: 'full-screen-slides-pagination'
  8. };
  9. var settings = $.extend({}, defaults, options);
  10. function nc_slider($slider) {
  11. var slider = {
  12. timer: null,
  13. $items: null,
  14. items_count: null,
  15. max_index: null,
  16. $pagination: null,
  17. auto: true,
  18. current: 0
  19. };
  20. function init() {
  21. slider.$items = $slider.children();
  22. slider.items_count = slider.$items.length;
  23. if(slider.items_count <= 1) {
  24. return;
  25. }
  26. slider.max_index = slider.items_count - 1;
  27. slider.$items.hide();
  28. //初始化导航
  29. if(settings.pagination) {
  30. //生成导航按钮
  31. var pagination_html = '<ul class="' + settings.pagination_class + '">';
  32. for (var i = 1; i <= slider.items_count; i++) {
  33. pagination_html += '<li>' + '<a href="javascript:;">' + i + '</a>' + '</li>';
  34. }
  35. pagination_html += '</ul>';
  36. $slider.after(pagination_html);
  37. slider.$pagination = $slider.next('ul').find('li');
  38. //导航按钮单击切换
  39. slider.$pagination.on('click', function() {
  40. var next = $(this).index();
  41. go(next);
  42. });
  43. //鼠标移动到导航按钮上暂停自动播放
  44. slider.$pagination.mouseenter(function() {
  45. slider.auto = false;
  46. });
  47. slider.$pagination.mouseleave(function() {
  48. slider.auto = true;
  49. });
  50. }
  51. next();
  52. }
  53. function go(next) {
  54. slider.$items.eq(slider.current).fadeOut(settings.animate);
  55. slider.$items.eq(next).fadeIn(settings.animate);
  56. slider.current = next;
  57. if(settings.pagination) {
  58. slider.$pagination.eq(next).addClass('current').siblings('li').removeClass('current');
  59. }
  60. }
  61. function next() {
  62. if (slider.auto) {
  63. if (slider.current >= slider.max_index || slider.timer === null) {
  64. go(0);
  65. } else {
  66. go(slider.current + 1);
  67. }
  68. }
  69. slider.timer = setTimeout(next, settings.timeout);
  70. }
  71. init();
  72. }
  73. return this.each(function() {
  74. nc_slider($(this));
  75. });
  76. };
  77. })(jQuery);