easySlider1.7.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. /*
  2. * Easy Slider 1.7 - jQuery plugin
  3. * written by Alen Grakalic
  4. * http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
  5. *
  6. * Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
  7. * Dual licensed under the MIT (MIT-LICENSE.txt)
  8. * and GPL (GPL-LICENSE.txt) licenses.
  9. *
  10. * Built for jQuery library
  11. * http://jquery.com
  12. *
  13. */
  14. /*
  15. * markup example for $("#slider").easySlider();
  16. *
  17. * <div id="slider">
  18. * <ul>
  19. * <li><img src="images/01.jpg" alt="" /></li>
  20. * <li><img src="images/02.jpg" alt="" /></li>
  21. * <li><img src="images/03.jpg" alt="" /></li>
  22. * <li><img src="images/04.jpg" alt="" /></li>
  23. * <li><img src="images/05.jpg" alt="" /></li>
  24. * </ul>
  25. * </div>
  26. *
  27. */
  28. (function($) {
  29. $.fn.easySlider = function(options){
  30. // default configuration properties
  31. var defaults = {
  32. prevId: 'prevBtn',
  33. prevText: 'Previous',
  34. nextId: 'nextBtn',
  35. nextText: 'Next',
  36. controlsShow: true,
  37. controlsBefore: '',
  38. controlsAfter: '',
  39. controlsFade: true,
  40. firstId: 'firstBtn',
  41. firstText: 'First',
  42. firstShow: false,
  43. lastId: 'lastBtn',
  44. lastText: 'Last',
  45. lastShow: false,
  46. vertical: false,
  47. speed: 800,
  48. auto: false,
  49. pause: 2000,
  50. continuous: false,
  51. numeric: false,
  52. numericId: 'controls'
  53. };
  54. var options = $.extend(defaults, options);
  55. this.each(function() {
  56. var obj = $(this);
  57. var s = $("li", obj).length;
  58. var w = $("li", obj).width();
  59. var h = $("li", obj).height();
  60. var clickable = true;
  61. obj.width(w);
  62. obj.height(h);
  63. obj.css("overflow","hidden");
  64. var ts = s-1;
  65. var t = 0;
  66. $("ul", obj).css('width',s*w);
  67. if(options.continuous){
  68. $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
  69. $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
  70. $("ul", obj).css('width',(s+1)*w);
  71. };
  72. if(!options.vertical) $("li", obj).css('float','left');
  73. if(options.controlsShow){
  74. var html = options.controlsBefore;
  75. if(options.numeric){
  76. html += '<ol id="'+ options.numericId +'"></ol>';
  77. } else {
  78. if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
  79. html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
  80. html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
  81. if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
  82. };
  83. html += options.controlsAfter;
  84. $(obj).after(html);
  85. };
  86. if(options.numeric){
  87. for(var i=0;i<s;i++){
  88. $(document.createElement("li"))
  89. .attr('id',options.numericId + (i+1))
  90. .html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
  91. .appendTo($("#"+ options.numericId))
  92. .click(function(){
  93. animate($("a",$(this)).attr('rel'),true);
  94. });
  95. };
  96. } else {
  97. $("a","#"+options.nextId).click(function(){
  98. animate("next",true);
  99. });
  100. $("a","#"+options.prevId).click(function(){
  101. animate("prev",true);
  102. });
  103. $("a","#"+options.firstId).click(function(){
  104. animate("first",true);
  105. });
  106. $("a","#"+options.lastId).click(function(){
  107. animate("last",true);
  108. });
  109. };
  110. function setCurrent(i){
  111. i = parseInt(i)+1;
  112. $("li", "#" + options.numericId).removeClass("current");
  113. $("li#" + options.numericId + i).addClass("current");
  114. };
  115. function adjust(){
  116. if(t>ts) t=0;
  117. if(t<0) t=ts;
  118. if(!options.vertical) {
  119. $("ul",obj).css("margin-left",(t*w*-1));
  120. } else {
  121. $("ul",obj).css("margin-left",(t*h*-1));
  122. }
  123. clickable = true;
  124. if(options.numeric) setCurrent(t);
  125. };
  126. function animate(dir,clicked){
  127. if (clickable){
  128. clickable = false;
  129. var ot = t;
  130. switch(dir){
  131. case "next":
  132. t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;
  133. break;
  134. case "prev":
  135. t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
  136. break;
  137. case "first":
  138. t = 0;
  139. break;
  140. case "last":
  141. t = ts;
  142. break;
  143. default:
  144. t = dir;
  145. break;
  146. };
  147. var diff = Math.abs(ot-t);
  148. var speed = diff*options.speed;
  149. if(!options.vertical) {
  150. p = (t*w*-1);
  151. $("ul",obj).animate(
  152. { marginLeft: p },
  153. { queue:false, duration:speed, complete:adjust }
  154. );
  155. } else {
  156. p = (t*h*-1);
  157. $("ul",obj).animate(
  158. { marginTop: p },
  159. { queue:false, duration:speed, complete:adjust }
  160. );
  161. };
  162. if(!options.continuous && options.controlsFade){
  163. if(t==ts){
  164. $("a","#"+options.nextId).hide();
  165. $("a","#"+options.lastId).hide();
  166. } else {
  167. $("a","#"+options.nextId).show();
  168. $("a","#"+options.lastId).show();
  169. };
  170. if(t==0){
  171. $("a","#"+options.prevId).hide();
  172. $("a","#"+options.firstId).hide();
  173. } else {
  174. $("a","#"+options.prevId).show();
  175. $("a","#"+options.firstId).show();
  176. };
  177. };
  178. if(clicked) clearTimeout(timeout);
  179. if(options.auto && dir=="next" && !clicked){;
  180. timeout = setTimeout(function(){
  181. animate("next",false);
  182. },diff*options.speed+options.pause);
  183. };
  184. };
  185. };
  186. // init
  187. var timeout;
  188. if(options.auto){;
  189. timeout = setTimeout(function(){
  190. animate("next",false);
  191. },options.pause);
  192. };
  193. if(options.numeric) setCurrent(0);
  194. if(!options.continuous && options.controlsFade){
  195. $("a","#"+options.prevId).hide();
  196. $("a","#"+options.firstId).hide();
  197. };
  198. });
  199. };
  200. })(jQuery);