原生js简单轮播的实现

今天朋友让我帮忙指点js的封装，有些感触，毕竟用了这么久的框架，突然间让我写原生还真有点不习惯。于是就写了一点基础的轮播的封装示例

封装之前首先还是要把效果现写出来，毕竟无头封装对我来说还是有点小困难，毕竟是个菜鸟，呜呜呜呜（在这里留下了没有技术的泪水）

首先，既然要封装提供给别人用当然就得减少用户的操作，所以我这里的html提供盒子和图片（为了方便写我把上下翻也写进去了）。

html

<div id='myLb'>
	<ul class='liImg'>
		<li><img class="ts_tp" src="img/1.jpg"/></li>
		<li><img class="ts_tp" src="img/2.jpg"/></li>
		<li><img class="ts_tp" src="img/3.jpg"/></li>
	</ul>
</div>
	<div id='myclick'>
			<span onclick="prev()">上一张</span>
			<span onclick="next()">下一张</span>
	</div>

盒子写好了接下来就是生成需要的东西和相应的处理事件了

js

var timer;//定时器

			var ts_div=document.getElementById('myLb')
			var img_box=document.getElementsByClassName('liImg')
			var pandn=document.getElementById('myclick')
			var ts_img=document.getElementsByClassName('ts_tp')
			var c=ts_img.length
			var i = index = 0;
//			autoPlay()
			
//通过图片数量生成对应的圆点
			if(c>0){
				var ydBox=document.createElement('ul');
				for(i=0;i<c;i++){ 
					var yd=document.createElement('li');
					yd.className='my_hx'
					yd.id='myhx_'+i
					var node=document.createTextNode(i+1);
					yd.appendChild(node)
					ydBox.appendChild(yd)
					ts_div.appendChild(ydBox)
					var zz=zz+i
					zz=document.getElementById(yd.id)
//					console.log(zz)
					zz.onclick=function(){
						cz(this)
					}
				} 
			}
			var ydNum=document.getElementsByTagName('li')
//			console.log(ydNum[c])
			ydNum[c].className+=' fi_yd'
			ydBox.className = 'my_yd'
//	定义函数设置显示	
//由于原生没有jQuery的siblings(遍历)方法实现查找相邻元素，所以这里的实现就相对较为粗糙
function show(a){
			for(i=0;i<c;i++){ 
				ts_img[i].style.opacity=0; 
				ts_img[a].style.opacity=1;
				ydNum[c+i].style.color='black'; 
				ydNum[c+i].style.background='white';
				ydNum[c+a].style.color='red';
				ydNum[c+a].style.background='black';
			}
		} 
// 设置定时器		
	function autoPlay(){
		timer=setInterval(function(){
			index++; 
			index>=c&&(index=0); 
			show(index);
		},4000)
	} 
//上一张
	function prev(){
		index--;
		index<=-1&&(index=c-1); 
		show(index);
	}
//下一张
	function next(){
			index++; 
			index>=c&&(index=0); 
			show(index);	
			}
//点击圆点切换图片
function cz(x){
	clearInterval(timer);
	var ydid=x.id
	var myid=parseInt(ydid.slice(5))
//	console.log(myid)
	show(myid)
}
	
	
	

//console.log(pandn)
		pandn.onmouseenter=function(){
			clearInterval(timer);
		}
		pandn.onmouseleave = function () {
       		 autoPlay();
    		} 
         ydBox.onmouseenter=function(){
			 clearInterval(timer);
		}
		 ydBox.onmouseleave = function () {
       		 autoPlay();
    		} 

然后再加上css部分

css

#myLb{
				width: 60%;
				height: 800px;
				position: relative;
				margin:0 auto;
			}
			.liImg{
				height: 315px;
			}
			
			.liImg>li{
				list-style: none;
				position: absolute;
			}
			/*#myLb>ul>li{
				list-style: none;
				color:black;
				float: left;
			}*/
			.fi_yd{
				background: black;
				color:red;
			}
			.my_yd{
				width: 50%;
				margin-left: 18%;
				position: absolute;
			}
			.my_hx{
				width:120px ;
				text-align: center;
				list-style: none;
				border: 1px solid black;
				float: left;
				margin:0 auto;
			}

一个简单的轮播效果就实现了，许久没写原生了所以写得有些粗糙，见谅见谅！！！