├── 1.jpg
├── 2.jpg
├── 3.jpg
├── 4.jpg
├── 5.jpg
├── AJAX.jpg
├── logo.jpg
├── timg.jpg
├── gouri.jpg
├── http协议.jpg
├── jsonp.jpg
├── prismjs.jpg
├── README.md
├── index.html
└── roomSlider.js


/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pkjoebinbin/JS-roomSlider/HEAD/1.jpg


--------------------------------------------------------------------------------
/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pkjoebinbin/JS-roomSlider/HEAD/2.jpg


--------------------------------------------------------------------------------
/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pkjoebinbin/JS-roomSlider/HEAD/3.jpg


--------------------------------------------------------------------------------
/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pkjoebinbin/JS-roomSlider/HEAD/4.jpg


--------------------------------------------------------------------------------
/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pkjoebinbin/JS-roomSlider/HEAD/5.jpg


--------------------------------------------------------------------------------
/AJAX.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pkjoebinbin/JS-roomSlider/HEAD/AJAX.jpg


--------------------------------------------------------------------------------
/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pkjoebinbin/JS-roomSlider/HEAD/logo.jpg


--------------------------------------------------------------------------------
/timg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pkjoebinbin/JS-roomSlider/HEAD/timg.jpg


--------------------------------------------------------------------------------
/gouri.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pkjoebinbin/JS-roomSlider/HEAD/gouri.jpg


--------------------------------------------------------------------------------
/http协议.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pkjoebinbin/JS-roomSlider/HEAD/http协议.jpg


--------------------------------------------------------------------------------
/jsonp.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pkjoebinbin/JS-roomSlider/HEAD/jsonp.jpg


--------------------------------------------------------------------------------
/prismjs.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pkjoebinbin/JS-roomSlider/HEAD/prismjs.jpg


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # JS-roomSlider
 2 | **<h3>原生JS撸的轮播图插件</h3>**
 3 | 
 4 | 
 5 | 原生JS练手手写了个轻量级的轮播图插件，无第三方依赖，开箱即用，没有过多的繁杂配置。
 6 | 
 7 | <h3><a href="https://pkjoebinbin.github.io/JS-roomSlider/index.html">demo</a></h3>
 8 | <br/>
 9 | 
10 | 
11 | 
12 | <h4>1.引入JS</h4>
13 | 
14 |     <script src="roomSlider.js"></script>
15 | <br/>
16 | <h4>2.初始化结构。外层div需给定id以及设置宽高，img图片需给定宽高。</h4>
17 | 
18 |     
19 |     <style>
20 |         #slide{
21 |             width:520px;
22 |             height:280px;
23 |         }
24 |         
25 |         img{
26 |             width:520px;
27 |             height:280px;
28 |         }
29 |     </style>
30 |     
31 |     <div id="slide" style="width:520px;height:280px;">
32 |         <div>
33 |             <img src="1.jpg" alt="">
34 |             <img src="2.jpg" alt="">
35 |             <img src="3.jpg" alt="">
36 |             <img src="4.jpg" alt="">
37 |             <img src="5.jpg" alt="">
38 |         </div>
39 |     </div>
40 | <br/>
41 | 
42 | <h4>3.JS传入ID。</h4>
43 | 
44 |     var roomSlider = new RoomSlider('slide')
45 |     


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<title>轮播图</title>
  6 | 	
  7 | </head>
  8 | <style>
  9 | 	*{margin:0;padding:0;}
 10 | 	
 11 | 	
 12 | 
 13 | 	#slide{
 14 | 		
 15 | 		width:520px;
 16 | 		height:280px;
 17 | 		
 18 | 	}
 19 | 
 20 | 
 21 | 
 22 | 	#ttt{
 23 | 		
 24 | 		width:900px;
 25 | 		height:375px;
 26 | 		margin-top:200px;
 27 | 
 28 | 		
 29 | 	}
 30 | 
 31 | 
 32 | 
 33 | 	#ddd{
 34 | 		
 35 | 		width:800px;
 36 | 		height:510px;
 37 | 		margin-top:200px;
 38 | 
 39 | 		
 40 | 	}
 41 | 	
 42 | 
 43 | 
 44 | 
 45 | 	
 46 | 	
 47 | 	
 48 | /* 	#prev{
 49 | 	font-size:14px;
 50 | 	position:absolute;
 51 | 	left:0px;
 52 | 	top:130px;
 53 | 	z-index:2;
 54 | 	background:#333;
 55 | 	color:#fff;
 56 | 	padding:4px;
 57 | 	opacity:0.5;
 58 | 	border-style:none;
 59 | 	outline:none;
 60 | 	cursor:pointer;
 61 | 	display:none;
 62 | 	
 63 | } */
 64 | 	
 65 | 	
 66 | 	/* #next{
 67 | 		font-size:14px;
 68 | 		position:absolute;
 69 | 		right:0px;
 70 | 		top:130px;
 71 | 		z-index:2;
 72 | 		background:#333;
 73 | 		color:#fff;
 74 | 		padding:4px;
 75 | 		opacity:0.5;
 76 | 		border-style:none;
 77 | 		outline:none;
 78 | 		cursor:pointer;
 79 | 		display:none;
 80 | 		
 81 | 		
 82 | 	} */
 83 | 
 84 | 	
 85 | 
 86 | 
 87 | 
 88 | 
 89 | 
 90 | 	
 91 | </style>
 92 | 
 93 | 
 94 | <body>
 95 | 
 96 | 	<div id="slide">
 97 | 		<div>
 98 | 			<img src="1.jpg" alt="">
 99 | 			<img src="2.jpg" alt="">
100 | 			<img src="3.jpg" alt="">
101 | 			<img src="4.jpg" alt="">
102 | 			<img src="5.jpg" alt="">
103 | 		</div>
104 | 	</div>
105 | 
106 | 
107 | 
108 | 
109 | 
110 | 
111 | <div id="ddd" >
112 | 	
113 | 	<div>
114 | 		<img src="jsonp.jpg"  alt="">
115 | 		<img src="prismjs.jpg"  alt="">
116 | 		<img src="gouri.jpg"  alt="">
117 | 		<img src="AJAX.jpg"  alt="">
118 | 		<img src="http协议.jpg"  alt="">
119 | 		
120 | 		
121 | 		
122 | 	</div>
123 | 
124 | 
125 | </div>
126 | 
127 | 
128 | 
129 | 
130 | 
131 | 
132 | 
133 | 
134 | 
135 | 
136 | 
137 | 
138 | 
139 | 
140 | 
141 | 
142 | 
143 | 
144 | 	
145 | 
146 | 	
147 | </body>
148 | <!-- <script src="demo.js"></script> -->
149 | <script src="roomSlider.js"></script>
150 | 
151 | 
152 | <script>
153 | 	window.onload = function(){
154 | 		
155 | 		
156 | 		var a = new RoomSlider('slide');
157 | 	
158 | 		var c = new RoomSlider('ddd');
159 | 
160 | 
161 | 		
162 | 
163 | 		
164 | 		
165 | 
166 | 	}
167 | 
168 | </script>
169 | 
170 | </html>


--------------------------------------------------------------------------------
/roomSlider.js:
--------------------------------------------------------------------------------
  1 | ;(function(){
  2 | 
  3 | 	var RoomSlider = function(slideId){		//给一个参数传递
  4 | 		
  5 | 		
  6 | 		this.slide = document.getElementById(slideId); 	//获取第一层
  7 | 		this.room = this.slide.getElementsByTagName('div')[0];  //获取第二层
  8 | 		this.img = this.room.getElementsByTagName('img');	//获取图片的个数
  9 | 		this.slideWidth = parseInt(getComputedStyle(this.slide).width);	//获取slide的宽度
 10 | 		this.slideHeight = parseInt(getComputedStyle(this.slide).height);	//获取slide的高度，用来动态居中按钮的位置
 11 | 		
 12 | 
 13 | 
 14 | 		this.up = null;		//获取按钮
 15 | 		this.down = null;		//获取按钮
 16 | 		this.navButton = null;	//获取到所有的li
 17 | 
 18 | 		this.time = null;	//定时器
 19 | 		this.imgIndex = 1;	//获取图片位置
 20 | 		this.speed = -(this.slideWidth/10);	//动画速度
 21 | 
 22 | 		this.resetAllButton();	//初始化设置
 23 | 		
 24 | 		this.slide.onmouseenter = this.onmouseenter.bind(this);	//按钮绑定事件
 25 | 		this.slide.onmouseleave = this.onmouseleave.bind(this);	//按钮绑定事件
 26 | 		this.down.onclick = this.nextStart.bind(this);	//按钮绑定事件
 27 | 		this.up.onclick = this.prevStart.bind(this);	//按钮绑定事件
 28 | 		this.autoStart = setInterval(this.nextStart.bind(this),3000);	//定时器
 29 | 		
 30 | 		
 31 | 
 32 | 		
 33 | 
 34 | 		//遍历所有原点
 35 | 		for(var j=0;j<this.navButton.length;j++){
 36 | 			this.navButton[j].onclick = this.navButtonClick.bind(this);
 37 | 		}
 38 | 		
 39 | 
 40 | 	};
 41 | 
 42 | 
 43 | 
 44 | 	
 45 | 
 46 | 	//立即执行函数初始化css样式
 47 | 	RoomSlider.prototype.resetCss = function(){
 48 | 
 49 | 		//初始化需要的样式
 50 | 		var createStyle = document.createElement('style');
 51 | 		/*两个左右按钮公共样式*/
 52 | 		createStyle.innerHTML+='.buttonCss{font-size:14px;position:absolute;;z-index:2;background:rgba(51,51,51,0.4);color:#fff;padding:4px;border-style:none;outline:none;cursor:pointer;display:none;}';
 53 | 		createStyle.innerHTML+='.room{position:absolute;}';	//初始化room的css
 54 | 		createStyle.innerHTML+='.slide{font-size:0;overflow:hidden;position:relative;}'	//初始化slide样式
 55 | 		createStyle.innerHTML+='.nav{padding:0 4px;list-style:none;position:absolute;font-size:0px;background:rgba(222,222,222,0.4);bottom:10px;right:10px;text-align:center;-moz-border-radius:10px;border-radius:10px;}';	//nav样式
 56 | 		createStyle.innerHTML+='.navButton{display:inline-block;margin:6px 4px;background:#fff;width:8px;height:8px;-moz-border-radius:8px;border-radius:8px;cursor:pointer;}'	//导航点样式
 57 | 		document.head.appendChild(createStyle);
 58 | 
 59 | 	}();
 60 | 
 61 | 
 62 | 	
 63 | 
 64 | 
 65 | 	
 66 | 
 67 | 
 68 | 	
 69 | 
 70 | 
 71 | 	//初始化函数
 72 | 	RoomSlider.prototype.resetAllButton = function(){
 73 | 		
 74 | 		var buttonPosition = this.slideHeight/2-14;		//动态得到按钮垂直居中的top值
 75 | 
 76 | 
 77 | 		this.slide.setAttribute('class','slide');
 78 | 		
 79 | 		this.room.style.left = 0+'px';	//初始化room的left
 80 | 		this.room.style.width = this.slideWidth*(this.img.length)+'px';	//设置room的宽度，等于图片的宽度*图片的数量
 81 | 		this.room.setAttribute('class','room');
 82 | 		
 83 | 
 84 | 
 85 | 
 86 | 		//创建按钮prev
 87 | 		var prev = document.createElement('div');	
 88 | 		prev.innerHTML = '<';
 89 | 		prev.setAttribute('class','buttonCss prev');
 90 | 		prev.style.left= 0 +'px;';
 91 | 		prev.style.top = buttonPosition+'px'; //设置按钮垂直居中
 92 | 		this.slide.appendChild(prev);
 93 | 		this.up = this.slide.querySelector('.prev');	//获取prev按钮
 94 | 
 95 | 
 96 | 		
 97 | 		//创建按钮next
 98 | 		var next = document.createElement('div');	
 99 | 		next.innerHTML = '>';
100 | 		next.setAttribute('class','buttonCss next');
101 | 		next.style.right = 0 +'px';
102 | 		next.style.top = buttonPosition +'px';	//设置按钮垂直居中
103 | 		this.slide.appendChild(next);
104 | 		this.down = this.slide.querySelector('.next');
105 | 
106 | 
107 | 
108 | 		
109 | 		//创建导航原点定位框
110 | 		var nav = document.createElement('ul');
111 | 		nav.id = 'nav';	
112 | 		nav.setAttribute('class','nav');
113 | 		this.slide.appendChild(nav);
114 | 
115 | 			
116 | 
117 | 		//生成导航原点
118 | 		for(var i=0;i<this.img.length;i++){
119 | 			var navButtonLi = document.createElement('li');
120 | 			navButtonLi.setAttribute('class','navButton');
121 | 			navButtonLi.index = i+1;
122 | 			nav.appendChild(navButtonLi);
123 | 		}
124 | 		this.navButton = this.slide.getElementsByTagName('li');	//获取到所有的li
125 | 		this.navButton[0].style.background = '#333';	//初始化第一个点的颜色
126 | 		
127 | 	}
128 | 
129 | 
130 | 		
131 | 		
132 | 	
133 | 
134 | 	
135 | 	//鼠标进入事件
136 | 	RoomSlider.prototype.onmouseenter = function(){
137 | 
138 | 		this.down.style.display = 'block';
139 | 		this.up.style.display = 'block';
140 | 		clearInterval(this.autoStart);
141 | 		this.autoStart = null;
142 | 	}
143 | 
144 | 	//鼠标离开事件
145 | 	RoomSlider.prototype.onmouseleave = function(){
146 | 		this.down.style.display = 'none';
147 | 		this.up.style.display = 'none';
148 | 		clearInterval(this.autoStart);
149 | 		this.autoStart = null;
150 | 		this.autoStart = setInterval(this.nextStart.bind(this),3000);	
151 | 	}
152 | 
153 | 	
154 | 	//down按钮事件
155 | 	RoomSlider.prototype.nextStart = function(){
156 | 		
157 | 		
158 | 		clearInterval(this.time);
159 | 		var _this = this;
160 | 
161 | 		this.time = setInterval(function(){
162 | 
163 | 				
164 | 				var left = parseInt(_this.room.style.left);
165 | 
166 | 				if(_this.imgIndex< _this.img.length ){
167 | 
168 | 					if(left > (-_this.slideWidth*_this.imgIndex) ){
169 | 						_this.room.style.left = parseInt(_this.room.style.left)+_this.speed+'px';	
170 | 					}else{
171 | 						clearInterval(_this.time);
172 | 						_this.room.style.left = -_this.slideWidth*_this.imgIndex +'px';
173 | 						
174 | 						_this.navButton[_this.imgIndex-1].style.background = '#fff';
175 | 						_this.imgIndex++;
176 | 						_this.navButton[_this.imgIndex-1].style.background = '#333';
177 | 
178 | 					}
179 | 
180 | 				}else{
181 | 					if(left < 0){
182 | 						_this.room.style.left = parseInt(_this.room.style.left)+(-_this.speed*2)+'px';	
183 | 
184 | 					}else{
185 | 						clearInterval(_this.time);
186 | 						_this.room.style.left = 0+'px';
187 | 						_this.navButton[_this.imgIndex-1].style.background = '#fff';
188 | 						_this.imgIndex = 1;
189 | 						_this.navButton[_this.imgIndex-1].style.background = '#333';
190 | 
191 | 							
192 | 					};
193 | 
194 | 				};	
195 | 		},16.7);
196 | 
197 | 	}
198 | 
199 | 
200 | 	//up按钮事件
201 | 	RoomSlider.prototype.prevStart = function(){
202 | 		
203 | 		clearInterval(this.time);
204 | 		var _this = this;
205 | 
206 | 		this.time = setInterval(function(){
207 | 
208 | 				var left = parseInt(_this.room.style.left);
209 | 
210 | 				if(_this.imgIndex == 1){
211 | 					if(left > -_this.slideWidth*(_this.img.length-1)){
212 | 						_this.room.style.left = left+(_this.speed*2) +'px';
213 | 						
214 | 					}else{
215 | 						clearInterval(_this.time);
216 | 						_this.room.style.left = -_this.slideWidth*(_this.img.length-1)+'px';
217 | 						
218 | 						_this.navButton[_this.imgIndex-1].style.background = '#fff';
219 | 						_this.imgIndex = _this.img.length;
220 | 						_this.navButton[_this.imgIndex-1].style.background = '#333';
221 | 					}
222 | 				}else{
223 | 
224 | 
225 | 					if(left < -(_this.slideWidth*(_this.imgIndex-1)-_this.slideWidth)){
226 | 						_this.room.style.left = left - _this.speed +'px';
227 | 
228 | 					}else{
229 | 						clearInterval(_this.time);
230 | 						_this.room.style.left = -(_this.slideWidth*(_this.imgIndex-1)-_this.slideWidth) + 'px';
231 | 						
232 | 						_this.navButton[_this.imgIndex-1].style.background = '#fff';
233 | 						_this.imgIndex--;
234 | 						_this.navButton[_this.imgIndex-1].style.background = '#333';
235 | 					}
236 | 
237 | 				}
238 | 
239 | 		},16.7);
240 | 	}
241 | 
242 | 
243 | 	//原点点击事件
244 | 	RoomSlider.prototype.navButtonClick = function(e){
245 | 		
246 | 
247 | 		clearInterval(this.time);
248 | 		var _this= this;
249 | 		var liTarget = e.target;		//匿名函数的this问题，需要同时指向构造函数与目标dom，采用e.target获取index
250 | 		
251 | 		this.time = setInterval(function(){
252 | 			
253 | 
254 | 			var left = parseInt(_this.room.style.left);
255 | 				
256 | 			//如果点击的原点位置大于轮播现在的位置
257 | 			if(liTarget.index>_this.imgIndex){
258 | 				if(left > -(_this.slideWidth)*(liTarget.index-1)){
259 | 					_this.room.style.left = parseInt(_this.room.style.left)+_this.speed*(liTarget.index-_this.imgIndex)+'px';	
260 | 				}else{
261 | 					clearInterval(_this.time);
262 | 					_this.room.style.left = -(_this.slideWidth)*(liTarget.index-1)+'px';
263 | 					_this.navButtonStyle.call(_this,liTarget);
264 | 					
265 | 						
266 | 				}
267 | 
268 | 			//如果点击的原点位置小于轮播的位置	
269 | 			}else if(liTarget.index<_this.imgIndex){
270 | 				if(left < -_this.slideWidth*(liTarget.index-1)){
271 | 					_this.room.style.left = parseInt(_this.room.style.left)-_this.speed*(_this.imgIndex-liTarget.index)+'px';	
272 | 				}else{
273 | 					clearInterval(_this.time);
274 | 					_this.room.style.left = (-_this.slideWidth)*(liTarget.index-1)+'px';
275 | 					_this.navButtonStyle.call(_this,liTarget);
276 | 					
277 | 				}
278 | 			}else{
279 | 				return false;
280 | 			}
281 | 		},16.7);
282 | 	}
283 | 
284 | 	
285 | 	
286 | 
287 | 	//原点样式改变
288 | 	RoomSlider.prototype.navButtonStyle = function(liTarget){
289 | 		liTarget.style.background = '#333';
290 | 		this.navButton[this.imgIndex-1].style.background = '#fff';
291 | 		this.imgIndex = liTarget.index;
292 | 	}
293 | 
294 | 
295 | 
296 | 	this.RoomSlider = RoomSlider;
297 | 
298 | })();
299 | 
300 | 
301 | 	
302 | 
303 | 
304 | 
305 | 


--------------------------------------------------------------------------------