jquery-rocksilder.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. /**
  2. rocktabs 图片切换
  3. caratename:chenxihu
  4. caratetime:214-04-06 21:40:00
  5. email:qqqq2900@126.com
  6. homepage:www.xh829.com
  7. */
  8. (function ($) {
  9. function rocksilder(options){
  10. var rand = ''+parseInt(Math.random()*99999)+'';
  11. var me = this;
  12. this.rand = rand;
  13. for(var i1 in options)this[i1]=options[i1];
  14. //初始化
  15. this.init = function(){
  16. var i,len=this.data.length;
  17. this.oldoi = -1;
  18. var s = '<div id="rocksilder_'+this.rand+'" style="position:relative;height:'+this.height+'">';
  19. if(len==0)return;
  20. for(i=0;i<len;i++){
  21. s+='<div index="'+i+'" style="height:'+this.height+';overflow:hidden;display:none;position:absolute;left:0px;top:0px;width:100%">';
  22. s+='<div><img src="'+this.data[i].src+'" width="100%"></div>';
  23. s+='</div>';
  24. }
  25. var bo = 0;
  26. if(this.titlebool){
  27. bo = 30;
  28. s+='<div style="position:absolute;bottom:0px;left:0px;width:100%;background:rgba(0,0,0,0.3);text-align:center;color:white;line-height:30px;height:30px;padding:0px 0px;overflow:hidden" id="rocksildertitle_'+this.rand+'">'+this.data[0].title+'</div>';
  29. }
  30. s+='<div style="position:absolute;bottom:'+bo+'px;left:0px;width:100%;text-align:center;color:white;line-height:20px;height:20px;overflow:hidden;" id="rocksildertitlev_'+this.rand+'"></div>';
  31. s+='</div>';
  32. if(this.view==''){
  33. $('body').append(s);
  34. }else{
  35. $('#'+this.view+'').html(s);
  36. }
  37. this.mobj = $('#rocksilder_'+this.rand+'');
  38. this.mobj.find('div[index]').click(function(){
  39. me._click(this);
  40. return false;
  41. });
  42. this._showview(0);
  43. };
  44. this._click=function(o1){
  45. var oi= parseFloat($(o1).attr('index'));
  46. var d = this.data[oi];
  47. if(this.onclick){
  48. this.onclick(d);
  49. }else{
  50. if(d.url)js.location(d.url);
  51. }
  52. };
  53. this._showview=function(oi){
  54. clearTimeout(this.timeoutobj);
  55. if(!get('rocksilder_'+this.rand+''))return;
  56. var len = this.data.length;
  57. if(oi>=len)oi=0;
  58. var i,s='';
  59. if(this.oldoi>=0){
  60. this.mobj.find('div[index="'+this.oldoi+'"]').hide();
  61. this.mobj.find('div[index="'+oi+'"]').show();
  62. }else{
  63. this.mobj.find('div[index]').hide();
  64. this.mobj.find('div[index="'+oi+'"]').show();
  65. }
  66. $('#rocksildertitle_'+this.rand+'').html(this.data[oi].title);
  67. for(i=0;i<len;i++){
  68. if(i>0)s+='&nbsp;&nbsp;';
  69. if(i==oi){
  70. s+='<span style="font-size:18px">●</span>';
  71. }else{
  72. s+='<span style="font-size:16px" xu="'+i+'">○</span>';
  73. }
  74. }
  75. $('#rocksildertitlev_'+this.rand+'').html(s).find('span[xu]').click(function(){
  76. var xu = parseFloat($(this).attr('xu'));
  77. me._showview(xu);
  78. return false;
  79. });
  80. this.oldoi = oi;
  81. this.timeoutobj = setTimeout(function(){me._showview(oi+1);},this.changtime);
  82. };
  83. this.remove=function(){
  84. clearTimeout(this.timeoutobj);
  85. $('#rocksilder_'+this.rand+'').remove();
  86. }
  87. }
  88. $.rocksilder = function(options){
  89. var defaultVal = {
  90. 'view': '',
  91. 'data':[],
  92. 'height' :'150px',
  93. 'titlebool':true,
  94. 'onclick':false,
  95. 'changtime':5000 //5秒
  96. };
  97. var can = $.extend({}, defaultVal, options);
  98. var clsa = new rocksilder(can);
  99. clsa.init();
  100. return clsa;
  101. };
  102. })(jQuery);