原生 js+css+html实现轮播图效果及左侧菜单栏效果

//轮播图  效果和上一篇 中的轮播图代码 一致  此篇是在轮播基础上新增的 左侧菜单栏效果

/*css代码 部分*/

/*html部分*/

		

			
			

			
            

            	

            		

            			

            				手机、配件
            			
            			

            				手机通讯:
            				手机
            				/
            				手机维修
            				/
            				以旧换新
            			
            			

            				手机配件:
            				手机壳
            				/
            				手机储存卡
            				/
            				数据线
            				/
            				充电器
            				/
            				电池
            			
            			

            				运营商:
            				中国联通
            				/
            				中国移动
            				/
            				中国电信
            			
            			

            				智能设备:
            				智能手环
            				/
            				智能家居
            				/
            				智能手表
            				/
            				其他配件
            			
            			

            				娱乐:
            				耳机
            				/
            				音响
            				/
            				收音机
            				/
            				麦克风
            			
            		
            	
            	
                

            		

            			

            				电脑
            			
            			

            				手机通讯:
            				手机
            				/
            				手机维修
            				/
            				以旧换新
            			
            			

            				手机配件:
            				手机壳
            				/
            				手机储存卡
            				/
            				数据线
            				/
            				充电器
            				/
            				电池
            			
            			

            				运营商:
            				中国联通
            				/
            				中国移动
            				/
            				中国电信
            			
            			

            				智能设备:
            				智能手环
            				/
            				智能家居
            				/
            				智能手表
            				/
            				其他配件
            			
            			

            				娱乐:
            				耳机
            				/
            				音响
            				/
            				收音机
            				/
            				麦克风
            			
            		
            	
            	
            	

            		

            			

            				家用电器
            			
            			

            				手机通讯:
            				手机
            				/
            				手机维修
            				/
            				以旧换新
            			
            			

            				手机配件:
            				手机壳
            				/
            				手机储存卡
            				/
            				数据线
            				/
            				充电器
            				/
            				电池
            			
            			

            				运营商:
            				中国联通
            				/
            				中国移动
            				/
            				中国电信
            			
            			

            				智能设备:
            				智能手环
            				/
            				智能家居
            				/
            				智能手表
            				/
            				其他配件
            			
            			

            				娱乐:
            				耳机
            				/
            				音响
            				/
            				收音机
            				/
            				麦克风
            			
            		
            	
            	
            	

            		

            			

            				家具
            			
            			

            				手机通讯:
            				手机
            				/
            				手机维修
            				/
            				以旧换新
            			
            			

            				手机配件:
            				手机壳
            				/
            				手机储存卡
            				/
            				数据线
            				/
            				充电器
            				/
            				电池
            			
            			

            				运营商:
            				中国联通
            				/
            				中国移动
            				/
            				中国电信
            			
            			

            				智能设备:
            				智能手环
            				/
            				智能家居
            				/
            				智能手表
            				/
            				其他配件
            			
            			

            				娱乐:
            				耳机
            				/
            				音响
            				/
            				收音机
            				/
            				麦克风
            			
            		
            	
            
			
			

				

					
						手机、配件
						
					
				
				

					
						电脑
						
					
				
				

					
						家用电器
						
					
				
				

					
						家具
						
					
				
			
			
			

				
				
					

				
				 
					

				
				
					

				
			
			
			
			
			
			

				
				
				
			
		

/*js 实现代码*/

/*首先封装一个代替getElementById()的方法,,,省着每次都要手写document.getElementById()这么长的代码*/
		function byid(id){
		/*首先条件：检测Id类型和值都要等于字符串，如果是则执行代码1:document.getElementById(id)，否则执行代码2：id*/
		return	typeof(id) === "string"?document.getElementById(id):id;//三元操作符
		/*return 弹出这个条件*/
		}
		
		var index = 0,//定义一个全局变量，记录索引
		    timer = null,//定时器
		    pics = byid("banner").getElementsByTagName("div"),//取id为banner下的div 得到数组
		    dots = byid("dots").getElementsByTagName("span"),
		    prve = byid("prve"),
		    brve = byid("brve"),
		    len = pics.length;//定义len得到数组pics的长度
		    subMenu = byid("sub-menu"),
		    innerBox = subMenu.getElementsByClassName("inner-box"),
		    menu = byid("menu-content"),
		    menuItem = menu.getElementsByClassName("menu-item");//渠道id为menu-content的菜单栏
		    
		    
		/*接下来将所有操作定义在函数slideImg里*/
		function slideImg(){
			var main = byid("main");//获取id为main的dom元素
			//鼠标滑过时清除定时器，离开继续
			main.onmouseover = function(){//鼠标划过时触发
				//如果timer为真时 清除定时器；
				 if(timer) clearInterval(timer);//clearInterval：清除定时器；
			}
			main.onmouseout = function(){//鼠标离开时触发
				timer = setInterval(function(){//每隔3秒调用一次里面的脚本
					index++;//每隔3秒索引+1
					if(index >= len){//判断如果索引值大于等于数组长度，就强制让它返回索引为0的图片
						index = 0;
					}
					//切换图片
					charImg();
				},3000);//间歇调用
			}
			//调用onmouseout方法，自动在main上触发鼠标离开的事件。
			main.onmouseout();//进行自动轮播，无需触碰
			
			//遍历所有点击，且绑定点击事件，点击圆点切换图片
			for(var d = 0; d= len) index=0;
				charImg();
			}
			//下一张
			prve.οnclick=function(){
				index--;
				if(index < 0) index = len-1;
				charImg();
			}
			//导航菜单
			//遍历主菜单拿到每一个元素，并绑定事件
			for(var m = 0; m < menuItem.length; m++){
				//给每一个menu-item定义data-index属性,作为索引
					menuItem[m].setAttribute("data-index",m);
				menuItem[m].onmouseover = function(){
					var idx = this.getAttribute("data-index");
					//遍历所有子菜单，将每一个都隐藏
					for(var j=0;j