jquery-plugin-slide.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. //guoxun01@126.com
  2. //实例化...................................
  3. //$('.Homeslide').homeslide(home_slide_data);
  4. ;(function($) {
  5. //guoxun@staff.sina.com.cn
  6. $.fn.homeslide = function(data,auto,time) {
  7. var cur = 0;
  8. var self = $(this);
  9. var length = data.length;
  10. var bigwrap = self.find('.Homeslide_bigwrap');
  11. //操控的dom
  12. var bigimg = self.find('.Homeslide_bigpicdiv a img');
  13. var biga = self.find('.Homeslide_bigpicdiv a');
  14. var thumb= self.find('.Homeslide_thumb ul');
  15. var li;
  16. //每次滚动宽度
  17. var thumb_w;
  18. var Timer;
  19. //初始化
  20. (function(){
  21. thumbcreate();
  22. bigto(0);
  23. })();
  24. //大图
  25. function bigto(n){
  26. bigwrap.stop().animate({'opacity':0.5}, 100,function(){
  27. if(n>=length) n = n-length;
  28. var dat = data[n];
  29. bigimg.attr('src', dat['image']);
  30. bigimg.attr('onclick', dat['onc']);
  31. //相关
  32. bigwrap.animate({'opacity':1}, 200);
  33. });
  34. }
  35. //生成缩略图
  36. function thumbcreate(){
  37. var html = "";
  38. var first = '';
  39. for (var i = 0; i < 2*length; i++) {
  40. first= (i==0)?'this':'';
  41. var j = i;
  42. if(j>=length) j = i-length;
  43. html+='<li class="'+first+'"><span class="Homeslide_angle"></span><img src="'+data[j]['thumb']+'"></li>';
  44. };
  45. thumb.html(html);
  46. //操控的dom
  47. thumb= self.find('.Homeslide_thumb ul');
  48. li = self.find('.Homeslide_thumb ul li');
  49. thumb_w = li.width();
  50. ang = self.find('.Homeslide_angle');
  51. }
  52. // 幻灯主函数
  53. function moveto(n){
  54. //大图
  55. bigto(n);
  56. //小图移动
  57. var left = -n*thumb_w;
  58. thumb.stop().animate({'left':left}, 350,function(){
  59. if(n>=length){
  60. thumb.css('left', -(n-length)*thumb_w);
  61. n=n-length;
  62. }
  63. cur=n;
  64. li.eq(n).addClass('this').siblings('li').removeClass('this');
  65. });
  66. //缩略图背景
  67. li.eq(n).addClass('this').siblings('li').removeClass('this');
  68. }
  69. thumb.delegate('li', 'click', function(event) {
  70. var index = $(this).index();
  71. moveto(index);
  72. });
  73. //左右键
  74. self.find('.Homeslide_hand1').click(function(event) {
  75. cur++;
  76. if(cur==2*length) cur=0;
  77. bigto(cur);
  78. moveto(cur);
  79. });
  80. self.find('.Homeslide_hand0').click(function(event) {
  81. if(cur==0){
  82. thumb.css('left', -length*thumb_w);
  83. cur=length;
  84. }
  85. cur--;
  86. bigto(cur);
  87. moveto(cur);
  88. });
  89. //自动播放
  90. if(auto){
  91. var tfuc = function(){ self.find('.Homeslide_hand1').click() };
  92. Timer= setInterval(tfuc,time);
  93. self.hover(function() {
  94. clearInterval(Timer);
  95. }, function() {
  96. Timer= setInterval(tfuc,time);
  97. });
  98. }
  99. return self;
  100. };
  101. })(jQuery);