1 function zhc_slide(setting){ 2 var default_setting = { 3 container: '', //初始化容器(必要参数) 4 direction: 'h', //定义滚动方向(默认 h代表水平, v代表垂直) 5 durtime: 3000, //延迟时间(等待3秒切换下一个元素) 6 animatetime: 300 //动画效果用时0.3秒 7 } 8 var self = this; 9 self = $.extend(self, default_setting, setting); 10 self.init(); 11 } 12 zhc_slide.prototype = { 13 //对象初始化 14 init: function(){ 15 var self = this; 16 self.cur = 1; 17 self.height = $('#'+self.container).height(); 18 self.width = $('#'+self.container).width(); 19 self.timer = null; 20 self.wrapper = self.container + '_wrapper'; 21 //创建wrpper 22 self.initele(); 23 self.start(); 24 }, 25 //初始化dom元素 26 initele: function(){ 27 var self = this; 28 var list = $('#'+self.container).children('ul'); 29 var listes = list.children('li'); 30 var lisum = listes.length; 31 var strarr = new Array(); 32 self.elesum = lisum; //获取元素个数 33 strarr.push('<div id="'+self.wrapper+'" style="position:absolute;left:0px;top:0px;">'); 34 strarr.push('<table>'); 35 for(var i=0; i< lisum; i++){ 36 switch(this.direction){ 37 case 'h': 38 if(i == 0) strarr.push('<tr>'); 39 strarr.push('<td>'+listes[i].innerHTML+'</td>'); 40 if(i == (lisum-1)) strarr.push('</tr>'); 41 break; 42 case 'v': 43 strarr.push('<tr><td>'+listes[i].innerHTML+'</td></tr>'); 44 break; 45 } 46 } 47 strarr.push('</table>'); 48 strarr.push('</div>'); 49 $('#'+self.container).html(strarr.join('')); 50 //鼠标移动到wrapper上停止自动滚动 51 $('#'+self.wrapper).mouseover(function(){ 52 self.stop(); 53 }); 54 //鼠标移出wrapper上开始滚动 55 $('#'+self.wrapper).mouseout(function(){ 56 self.start(); 57 }); 58 }, 59 //元素自动从当前位置开始滚动 60 start: function(){ 61 var self = this; 62 self.timer = window.setInterval(function(){ 63 self.next(); 64 }, self.durtime); 65 }, 66 //停止元素自动滚动 67 stop: function(){ 68 window.clearInterval(this.timer); 69 }, 70 //滚动定位 71 position: function(cur, direction){ 72 direction = direction || this.direction; 73 switch(direction){ 74 case 'h': 75 return ((-(cur-1)*this.width) + 'px'); 76 break; 77 case 'v': 78 return ((-(cur-1)*this.height) + 'px'); 79 break; 80 default: 81 return this.position(cur, 'h'); 82 } 83 }, 84 85 //滚动 86 slide: function slide(flag, to){ 87 flag = flag || 'next'; 88 switch(flag){ 89 case 'next': 90 this.cur++; 91 if(this.cur > this.elesum){ 92 this.cur = 1; 93 } 94 break; 95 case 'prev': 96 this.cur--; 97 if(this.cur < 1){ 98 this.cur = this.elesum; 99 } 100 break; 101 case 'to': 102 this.cur = to; 103 break; 104 default: slide('next'); 105 } 106 107 scroll = this.position(this.cur); 108 if(this.direction == 'v'){ 109 $('#'+this.wrapper).animate({top:scroll}, this.animatetime); 110 }else{ 111 $('#'+this.wrapper).animate({left:scroll}, this.animatetime); 112 } 113 114 }, 115 //向前滚动一个元素 116 prev: function(){ 117 this.slide('prev'); 118 }, 119 //向后滚动一个元素 120 next: function(){ 121 this.slide('next'); 122 }, 123 //点击向前滚动一个元素(外部prevbtn接口) 124 clickPrev: function(){ 125 this.stop(); 126 this.prev(); 127 this.start(); 128 }, 129 //滚动向后滚动一个元素(外部nextbtn接口) 130 clickNext: function(){ 131 this.stop(); 132 this.prev(); 133 this.start(); 134 }, 135 //滚动到特定某一元素(主要为了数字控制滚动) 136 slideTo: function(to){ 137 this.stop(); 138 to = parseInt(to) || 1; 139 this.slide('to', to); 140 this.start(); 141 } 142 }