js实现可配置参数的轮播图

  1 var show = document.getElementById("show");
  2 var pic = show.getElementsByTagName(‘img‘);
  3 var timer;
  4 var start_index;
  5 var listli = [], lista = [], i;
  6 addEvent(window, "load", function(){
  7     //主调用
  8     roundShow(1, 1, 2000);
  9     //设置轮播参数，direction == 1 为正向，isloop == 1 为循环；
 10     function roundShow(direction, isloop, interval){
 11         //添加id与style.left并初始化；
 12         (function(){
 13             for(var k=0; k<pic.length; k++){
 14                 pic[k].setAttribute("id", "pic"+k);
 15                 pic[k].setAttribute("style", "left:"+800+"px; background-color:");                    
 16             }
 17         })();
 18         
 19         //生成对应图片的小点
 20         (function createPointer(){
 21             var list = document.createElement("ul");
 22             list.setAttribute("id", "round_list");
 23             document.getElementById("show").appendChild(list);
 24             for(var i=0; i<pic.length; i++){
 25                 listli[i] = document.createElement("li");
 26                 list.appendChild(listli[i]); 
 27                 lista[i] = document.createElement("a");
 28                 lista[i].setAttribute("id", "point"+i);
 29                 listli[i].appendChild(lista[i]);
 30             }
 31             //添加样式
 32             var style = document.createElement("style");
 33             style.type = "text/css";
 34             var text = "#round_list{position: absolute;bottom: 5px;right: 10px;}#round_list li{display: inline-block;} #round_list a{width: 10px;height: 10px;display: inline-block;border: 1px solid white;border-radius: 100%;margin-left:5px;}";
 35             try{
 36                 style.appendChild(document.createTextNode(text));
 37             }
 38             catch(ex){
 39                 style.styleSheet.cssText = text;
 40             }
 41             var head = document.getElementsByTagName("head");
 42             head[0].appendChild(style);
 43 
 44             //添加鼠标滑过小点时的动作
 45             for(i=0; i<pic.length; i++){
 46                 lista[i].onmouseover = function(){
 47                     clearInterval(timer);
 48                     //把清除movement时截停的图片挪一边去
 49                     for(var j=0; j<pic.length; j++){
 50                         pic[j].style.left = 800+"px";
 51                     }
 52                     //再把当前的挪过来                    
 53                     pic[start_index].style.left = 0;    
 54                     //确定图片滑动方向
 55                     var toindex = lista.indexOf(this);
 56                     if(toindex > start_index){
 57                         pic[toindex].style.left = 800+"px";
 58                         movePic("pic"+start_index, "pic"+toindex, 1);
 59                     }
 60                     if(toindex < start_index){
 61                         pic[toindex].style.left = -800+"px";
 62                         movePic("pic"+start_index, "pic"+lista.indexOf(this), 0);
 63                     }                                    
 64                     start_index = lista.indexOf(this);
 65                 }
 66                 lista[i].onmouseout = function(){
 67                     clearInterval(timer);
 68                     timer = setInterval("roundPic("+direction+", "+isloop+")", interval);
 69                 }
 70             }        
 71         })();
 72         //按配置参数进行初始化
 73         if(direction){
 74             start_index = 0;
 75         }
 76         else{
 77             start_index = pic.length-1;
 78         }
 79         pic[start_index].style.left = 0;
 80         lista[start_index].setAttribute("style", "background-color:white;");//首图片小点点亮
 81         timer = setInterval("roundPic("+direction+", "+isloop+")", interval);
 82     }
 83 });
 84 
 85 //图片滑动动画
 86 function movePic(nowid, nextid, direction){
 87     //开始移动，将当前的小圆点灭掉
 88     //lista[parseInt(nowid.replace(/[^0-9]+/g, ""))].setAttribute("style","");
 89     lista[parseInt(nowid.replace(/[^0-9]+/g, ""))].style.backgroundColor = "";
 90 console.log(lista[parseInt(nowid.replace(/[^0-9]+/g, ""))].style);
 91     now = document.getElementById(nowid+"");            
 92     next = document.getElementById(nextid+"");
 93     //为防止频繁快速调用（如鼠标很快的移动）造成的拉扯，所以每次都将积累在setTimeout队列中的事件清除；
 94     if(pic.movement){
 95         clearTimeout(pic.movement);
 96     }                
 97     var nowleft = parseInt(now.style.left);
 98     var nextleft = parseInt(next.style.left);
 99     var dist = 0;
100     if(direction){
101         var nowtoleft = -800;
102     }
103     else{
104         var nowtoleft = 800;
105     }
106     if(nowleft == nowtoleft){
107         //移动完成，将新的小圆点点亮
108         //lista[parseInt(nextid.replace(/[^0-9]+/g, ""))].setAttribute("style", "background-color:white");
109         lista[parseInt(nextid.replace(/[^0-9]+/g, ""))].style.backgroundColor = "white";    
110         return true;
111     }
112     else if(nowleft > nowtoleft){
113         dist = Math.ceil((nowleft - nowtoleft)/20);//变速运动
114         nowleft -= dist;
115         nextleft -= dist;
116     }
117     else{
118         dist = Math.ceil((nowtoleft - nowleft)/20);//变速运动
119         nowleft += dist;
120         nextleft += dist;
121     }
122     now.style.left = nowleft+‘px‘;
123     next.style.left = nextleft+‘px‘;
124     var repeat = "movePic(‘"+nowid+"‘,‘"+nextid+"‘,"+direction+")";    
125     //movement设置成全局变量会造成上面开始那里“没有设置就清除”的错误；若设置成局部变量，
126     //则局部变量在clearTimeout函数的上下文里不存在，使其不能正常工作；
127     //所以设置成一个变量的属性；        
128     pic.movement = this.setTimeout(repeat, 1);
129 }
130 
131 //按设置顺序轮播图片
132 function roundPic(direction, isloop){
133     //debug:如果在不循环且当前为最末index的情况下调用roundPic();
134     if(!isloop && (direction && start_index == pic.length-1) || (!direction && start_index == 0)){
135         pic[start_index].style.left = 0;
136         clearInterval(timer);
137         return;
138     }
139     if(direction){
140         if(isloop){
141             if(start_index == pic.length){
142                 start_index = 0;    
143             }
144             nextid = "pic"+(start_index+1);
145             if(start_index == pic.length-1){
146                 nextid = "pic"+0;
147             }
148         }
149         if(!isloop){
150             if(start_index < pic.length-1){
151                 nextid = "pic"+(start_index+1);
152             }
153             if(start_index == pic.length-2){
154                 clearInterval(timer);
155             }
156         }
157         startid = "pic"+start_index;
158         document.getElementById(startid).style.left = 0;
159         document.getElementById(nextid).style.left = 800+"px";        
160         movePic(startid, nextid, direction);
161         start_index++;
162     }
163     else{
164 
165         if(isloop){
166             if(start_index == -1){
167                 start_index = pic.length-1;    
168             }
169             nextid = "pic"+(start_index-1);
170             if(start_index == 0){
171                 nextid = "pic"+(pic.length-1);
172             }
173         }
174         if(!isloop){
175             if(start_index > 0){
176                 nextid = "pic"+(start_index-1);
177             }
178             if(start_index == 1){
179                 clearInterval(timer);
180             }
181         }
182         startid = "pic"+start_index;
183         document.getElementById(startid).style.left = 0;
184         document.getElementById(nextid).style.left = -800+"px";        
185         movePic(startid, nextid, direction);
186         start_index--;
187     }
188 }

 1 // 给一个element绑定一个针对event事件的响应，响应函数为listener
 2 function addEvent(element, event, listener) {
 3     if(element.addEventListener){
 4         element.addEventListener(event, listener, false)
 5     }
 6     else if(element.attachEvent){
 7         element.attachEvent(‘on‘+event, listener)
 8     }
 9     else{
10         element[‘on‘+event] = listener;
11     }
12 }