图像/横幅旋转器

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图像/横幅旋转器相关的知识,希望对你有一定的参考价值。

  1. // bannerRotate, Version 1.1.3
  2. // Copyright (c) Oct 3, 2010 adardesign.com
  3. // bannerRotate is freely distributable under the terms of an MIT-style license
  4. // This means you are free to use the code, but please leave this copyright notice intact
  5. // everything inside the "defaults" is configurable.
  6. (function ($) {
  7. $.fn.bannerRotate = function (options) {
  8. var defaults = {
  9. speed: 500,
  10. secSpeed: 500,
  11. interval: 4000,
  12. shouldHoverSwitch: false,
  13. builedNav: function (a) {
  14. var i = 0,
  15. container = $("<div class='controlsContainer'>").hide(),
  16. navElements = "";
  17. for (i = 0; i < a; i++) {
  18. navElements += "<a href='#'>";
  19. }
  20. container.html(navElements);
  21. return container;
  22. },
  23. stopAnimation: function (b) {
  24. b.stop(true, true);
  25. },
  26. stopInterval: function (interv) {
  27. clearInterval(interv);
  28. },
  29. stopTimeout: function (timeOut) {
  30. clearTimeout(timeOut);
  31. },
  32. addHoverUsability: {
  33. active: true,
  34. getMiliseconds: function () {
  35. return new Date().getTime();
  36. },
  37. timeLapsed: function (initTime) {
  38. var timeNow = this.getMiliseconds();
  39. return timeNow - initTime;
  40. }
  41. }
  42. };
  43. var options = $.extend(defaults, options);
  44. return this.each(function (i, el) {
  45. var bannerContainer = $(el),
  46. banners = bannerContainer.children(),
  47. bannersLength = banners.length,
  48. bannerNav = bannerContainer.append((options.builedNav(bannersLength).fadeIn(options.secSpeed))).find(".controlsContainer a"),
  49. next = 1,
  50. last = 0,
  51. updateValues = function (clicked) {
  52. if (clicked) {
  53. last = indexOfClicked;
  54. next = (last + 1) % bannersLength;
  55. }
  56. else {
  57. last = next;
  58. next = (next + 1) % bannersLength;
  59. }
  60. },
  61. initTime = 0,
  62. doFadeInterval, fadeTimeout, fadeInterval = function () {
  63. if (options.addHoverUsability.active) {
  64. do {
  65. initTime = options.addHoverUsability.getMiliseconds();
  66. } while (0);
  67. }
  68. banners.eq(next).fadeIn(options.speed);
  69. banners.eq(last).fadeOut(options.speed);
  70. bannerNav.eq(last).removeClass("active");
  71. bannerNav.eq(next).addClass("active");
  72. updateValues();
  73. },
  74. callDoFade = function () {
  75. doFadeInterval = setInterval(fadeInterval, options.interval);
  76. };
  77. // init things to do
  78. callDoFade();
  79. if (options.addHoverUsability.active) {
  80. do {
  81. initTime = options.addHoverUsability.getMiliseconds();
  82. } while (0);
  83. }
  84. bannerNav.eq(0).addClass("active");
  85. banners.not(":eq(0)").hide();
  86. // prevents children elements to trigger mouseout from rotating banner
  87. //TODO: figure out why jQuery 1.4.3 doesnt respond when false passed in as the callback
  88. banners.children().bind("mouseover", function (e) {
  89. e.preventDefault();
  90. });
  91. bannerContainer.hover(function () {
  92. options.stopAnimation(banners);
  93. options.stopInterval(doFadeInterval);
  94. if (fadeTimeout) {
  95. options.stopTimeout(fadeTimeout);
  96. }
  97. if (intervalTimeout) {
  98. options.stopTimeout(intervalTimeout);
  99. }
  100. }, function () {
  101. if (options.addHoverUsability.active) {
  102. timeLapsed = options.addHoverUsability.timeLapsed(initTime);
  103. if (timeLapsed >= options.interval) {
  104. callDoFade();
  105. fadeInterval();
  106. } else {
  107. fadeTimeout = setTimeout(fadeInterval, options.interval - timeLapsed);
  108. fadeTimeout = setTimeout(callDoFade, (options.interval - timeLapsed) + options.speed);
  109. }
  110. }
  111. else {
  112. callDoFade();
  113. }
  114. })
  115. // delegate (to boost performance)
  116. .find(".controlsContainer").delegate("a", "click", function () {
  117. var clickedNav = $(this);
  118. if (clickedNav.hasClass("active")) {
  119. return false
  120. }
  121. //options.stopAnimation(banners);
  122. //options.stopInterval(doFadeInterval);
  123. clickedNav.siblings().removeClass("active");
  124. clickedNav.addClass("active");
  125. indexOfClicked = bannerNav.index(clickedNav);
  126. banners.eq(last).fadeOut(options.secSpeed);
  127. banners.eq(indexOfClicked).fadeIn(options.secSpeed, function () {
  128. banners.eq(indexOfClicked).css("opacity", 1);
  129. });
  130. if (options.addHoverUsability.active) {
  131. initTime = options.addHoverUsability.getMiliseconds();
  132. }
  133. updateValues(true);
  134. return false;
  135. }).delegate("a", "mouseover", function () {
  136. if (options.shouldHoverSwitch) {
  137. $(this).click();
  138. }
  139. });
  140. });
  141. };
  142. })(jQuery);

以上是关于图像/横幅旋转器的主要内容,如果未能解决你的问题,请参考以下文章

简单的PHP广告横幅/图像旋转器

javascript 响应横幅旋转器

html 简单的横幅旋转器与jQuery

html 简单的横幅旋转器与jQuery

Javascript 旋转横幅

为旋转横幅添加下一个和上一个按钮