原生js简单轮播的实现

比眉伴天荒 2022-05-15 01:09 209阅读 0赞

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

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

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

html

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

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;
    			}

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