焦点图滚动 

  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 }

 

posted @ 2012-12-11 16:31  Red Candle  阅读(214)  评论(0)    收藏  举报