一个轮播图做了一天多，期间各种小错误层出不穷，为自己的功力感到压力好大，却也在这艰难挣扎中体会了不少知识点，更加求知若渴。
get到的点：js来添加、修改、去除css样式
对setTimeout 或setInterval 函数队列里事件的清除
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 }
addEvent是已经自己封装过的函数。
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 }
时间： 2024-12-11 16:08:51