原生 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
	

原生 js+css+html实现轮播图效果及左侧菜单栏效果_第1张图片

原生 js+css+html实现轮播图效果及左侧菜单栏效果_第2张图片

你可能感兴趣的:(个人学习笔记)