JS第九期（轮播图+类的操作+JSON+简易二级下拉菜单制作）

一、轮播图

效果图：

要实现轮播图的效果还是要用到上一期提到的简易动画效果的move函数、getStyle函数

/* 创建一个执行简单动画的函数 
	    参数：
		obj :执行动画的对象
		attr:要执行动画的样式，例如：left\top\height
		target:执行动画的目标
		speed：执行动画的速度
		callback:回调函数
		
	*/
    	
		function move(obj,attr,target,speed,callback){
			//开启新的定时器之前关闭旧的定时器
			 clearInterval(obj.timer);
			//获取box1原来的left值
			var current=parseInt(getStyle(obj,attr)); 
			//判断该往哪边跑
			 if(current>target){
				 speed=-speed;
			 }
			//开启定时器
			obj.timer=setInterval(function(){
				//获取box1原来的left值
				var oldValue=parseInt(getStyle(obj,attr)); 
			//在旧值的基础上增加
			var newValue=oldValue+speed;
			//判断是否大于给定值
			if((speed>0&&newValue>target)||(speed<0&&newValue<target)){
			newValue=target;
			} 
			//将新值付给box1
			obj.style[attr]=newValue+"px";
			//当元素移动到800PX，使其停止运行
			if(newValue==target){
				//动画执行完毕关闭定时器
			clearInterval(obj.timer);
			//动画执行完毕，调用回调函数，有才调，没有就不调
			callback && callback();
			} 
		},30);
	}
    //获取对象样式 obj:获取对象 name:想要的样式值
		function getStyle(obj,name){
			if(window.getComputedStyle){
				return getComputedStyle(obj,null)[name];
			}else{
				return obj.currentStyle[name];
			}
		}

首先设置页面样式：

HTML代码：

<!-- 创建一个外部div作为大的容器 -->
		<div id="outer">
			<!-- 创建一个ul，用于放置图片 -->
			<ul id="imgList">
				<li><img src="img/1.jpg" /></li>
				<li><img src="img/2.jpg" /></li>
				<li><img src="img/3.jpg" /></li>
				<li><img src="img/4.jpg" /></li>
				<li><img src="img/5.jpg" /></li>
				<li><img src="img/6.jpg" /></li>
					<li><img src="img/1.jpg" /></li>
			</ul>
			<!-- 创建导航按钮 -->
			<div id="navDiv">
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				
			</div>
		</div>

 CSS样式：

值得注意的是设置导航点居中可以采取以下方法:

首先，将元素的position设置为absolute，这样它就可以相对于其最近的已定位（非static）祖先元素定位。
然后，将left属性设置为50%，将元素的左边缘移动到包含块的中心。
最后，使用transform属性的translate函数向左移动元素自身宽度的50%，这样元素的中心点就会与包含块的中心点对齐

*{
			margin: 0;
			padding: 0;
		}
#outer{
	width: 620px;
	height: 620px;
	margin: 10px auto;
	background-color: #5F9EA0;
	padding: 10px 0;
	position: relative;/* 给子元素开启绝对定位时，最好给父元素开启相对定位 */
	/* 裁剪溢出内容 */
	overflow:hidden ;
			
}
#imgList{
     list-style: none;
	/* width: 4000px; */
	position: absolute;/* 给子元素开启绝对定位 */	
	left: 0px; /* 设置偏移量 */
}
#imgList li{
	float: left;
	margin:0 10px;
}
/* 导航按钮 */
#navDiv{
	position: absolute;
	bottom: 5px;
	left: 50%;
	transform: translate(-50%);

}
#navDiv a{
	float: left;
	width:20px;
	height: 20px;
	margin:0 5px;
	background-color: red;
	opacity: 0.5;/* 设置透明度 */
	
}
/* 设置鼠标移入的效果 */
#navDiv a:hover{
	background-color: #000000;
}

JS代码:

 

<script type="text/javascript">
		window.onload=function(){
		
			var imgList=document.getElementById("imgList");
			var imgArr=document.getElementsByTagName("img");
			//设置imgList宽度
			imgList.style.width=620*imgArr.length+"px";
			var index=0;
			var allA=document.getElementsByTagName("a");
			allA[index].style.backgroundColor="black";
			/* 点击超链接切换图片 */
			for(var i=0;i<allA.length;i++){
				//为每一个超链接添加一个num属性
				allA[i].num=i;
				allA[i].onclick=function(){
					clearInterval(timer); 
				//获取点击超链接的索引
					index=this.num;
					/* imgList.style.left=(-620*index)+"px"; */
					setA();
					//使用简易动画
					move(imgList,"left",-620*index,20,function(){
						autoChange();
					});
					
				};
			}
			autoChange();
			//创建一个方法来设置选中的a
			function setA(){
				if(index>=imgArr.length-1){
					index=0;
					imgList.style.left=0;
				}
				//遍历所有的A，并将背景颜色设置为红色，选中的为黑色
				for(var i=0;i<allA.length;i++){
					allA[i].style.backgroundColor="";//不能直接写red，会覆盖hover的效果
				}
				//将选中的设置为黑色
				allA[index].style.backgroundColor="black";
			};
			var timer;
			//创建一个函数开启自动切换图片
			function autoChange(){
				//开启定时器，定时切换图片
			timer=setInterval(function(){
					//索引自增
					index++;
					//判断index值
					index%=imgArr.length;
					move(imgList,"left",-620*index,20,function(){
						//修改导航点
						setA();
					});
				},2000);
			}
			
		};
		</script>

二、类的操作

在之前说过可以通过下面这种方法一次修改样式,但是若想大量修改就非常麻烦

box.style.height=100+"px"

我们就可以使用改变类名的方式直接修改样式

	obj.className=“样式名”

 叠加两个样式 box.className+=" b2";

几个常用的函数:

/*
			 定义一个函数象一个元素中添加class属性 
			 参数：
			     obj:要添加class属性的元素
				 cn:要添加classmates值
			 */
			function addClass(obj,cn){
				obj.className+=" "+cn;
			}
			/* 
			 判断元素里面是否有指定的class
			 
			 */
			function hasClass(obj,cn){
				var reg=new RsgExp("\\b"+cn+"\\b");
				
				return reg.test(obj.className);
			}
			/* 删除指定元素的class属性 */
			function removeClass(obj,cn){
				var reg=new RsgExp("\\b"+cn+"\\b");
				//删除class
				obj.className=obj.className.replace(reg,"");
			}
			/*!!!!! 切换一个类 ，有就删除，没有就添加*/
			function toggleClass(obj,cn){
				var reg=new RsgExp("\\b"+cn+"\\b");
				//判断是否有cn
				if(hasClass(obj,cn)){
					removeClass(obj,cn);
				}else{
					addClass(obj,cn);
				}
				
			}

三、二级下拉菜单

效果图：

 HTML代码:

	<div id="my_menu" class="sdmenu">
			<div>
				<span class="menuSpan">商品分类</span>
				<a href="#">日用品</a>
				<a href="#">女装</a>
				<a href="#">大牌好物</a>
				<a href="#">美妆</a>
				<a href="#">药品</a>
				<a href="#">饰品</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">用户管理</span>
				<a href="#">账号管理</a>
				<a href="#">地址管理</a>
				<a href="#">好友管理</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">圈子管理</span>
				<a href="#">我的装饰</a>
				<a href="#">商品管理</a>
				<a href="#">订单管理</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">设置</span>
				<a href="#">账号设置</a>
				<a href="#">重置密码</a>
				<a href="#">退出登录</a>
			</div>
		</div>

 CSS样式:

注意点:

 font-family: Arial, Helvetica, sans-serif;
     /* Arial 是首选字体。
        Helvetica 是当浏览器不支持 Arial 时的备选字体。
        sans-serif 是一个通用字体族，表示在没有找到前面列出的字体时，浏览器可以使用任何无衬线字体。 */

 overflow: hidden;
     /* hidden 表示如果内容超出了元素的边界，超出部分将被隐藏，不会显示滚动条。
     repeat-x 指定了背景图像在水平方向（x轴）上重复，但在垂直方向（y轴）上不重复。这通常用于创建水平条纹效果。
     */

 background: url(../img/1.gif) no-repeat right bottom;
     /* no-repeat 表示背景图像不会在水平和垂直方向上重复铺满整个元素。
      right bottom 指定了背景图像的位置，将其放置在元素的右下角。*/

*{
			margin: 0;
			padding: 0;
			list-style-type: none;
		}
		a,img{
			border: 0;
			text-decoration: none;/* 清除文本装饰效果 */
		}
		body{
			font:12px/180% Arial, Helvetica, sans-serif,"华文新魏";
		}
/* sdmenu */
div.sdmenu{
	 width: 150px;
	 margin: 0 auto;
	 font-family: Arial, Helvetica, sans-serif;
	
     font-size: 20px;
	 padding-bottom: 5px;
	 background: url(../img/1.gif) no-repeat right bottom;
	 color: #000000;
 }
div.sdmenu div{
	 background-color: #CCCCCC;
	 overflow: hidden;
	
 }
 div.sdmenu div:first-child{
	 background-color: #CCCCCC;
 }
div.sdmenu div.collapsed{
		height: 35px;
		border:white 1px solid;
	}
 div.sdmenu div span{
	 display: block;/* 使span也显示为块级元素 */
	 height: 35px;
	 line-height: 35px;
	 overflow: hidden;
	 padding: 4px 10px;
	 font-weight: bold;
	 color: #F5F5DC;
	 background-color: #000000;
	 cursor: pointer;
	 border-bottom: 1px solid #ddd;
 }
div.sdmenu div a{
		display: block;
		border-bottom: 1px solid #e4e4e4;
		padding: 0.3125rem;
		color: #576b95;
		background-color: #F5F5F5;
	}
	div.sdmenu div a:hover{
		background-color: #576b95;
		color: #FFFFFF;
	}
 
 
 

 JS代码:

<script type="text/javascript">
		window.onload=function(){
			/* 
			每一个二级菜单都是一个div 
			 当div具有collapsed这个类时候，就是折叠状态，没有就是展开状态
			 */
			var menuSpan=document.querySelectorAll(".menuSpan");
			var openDiv=menuSpan[0].parentNode;//定义变量保存当前打开的菜单
			for(var i=0;i<menuSpan.length;i++){
				menuSpan[i].onclick=function(){
					//获取当前span的父元素
					var parentDiv=this.parentNode;
					//切换菜单显示状态
					toggleMenu(parentDiv);
					//判断openDiv和parentDiv是否一样
					if(openDiv!=parentDiv && !hasClass(openDiv,"collapsed")){
					//打开新的菜单后，应该关闭之前打开的菜单
					toggleMenu(openDiv);
					}
					
					//修改openDiv为当前打开的菜单
					openDiv=parentDiv;
				};
			}
			/* 切换菜单的显示和折叠状态 */
			function toggleMenu(obj){
				//切换之前去元素高度
				var begin=obj.offsetHeight;
				//关闭父元素,切换显示
				toggleClass(obj,"collapsed");
				//切换后获取一个元素的高度
				var end=obj.offsetHeight;
				//将元素高度重置为begin
				obj.style.height=begin+"px";
				//执行过渡
				move(obj,"height",end,10,function(){
					//动画执行完毕删除内联样式
					obj.style.height="";
				});
			}
		};
		</script>

四、JSON

 JSON（JavaScript Object Notation）
           -JS中的对象只有JS认识，其他语言都不认识
           -JSON就是一个特殊格式地方字符串，可以被任意i语言识别，并可以转换为任意语言中的对象
           -在开发中主要用于数据交互
           -JSON和JS对象格式一样，但是JSON字符串中的属性名必须加双引号，其余语法一样
  分类：
          1、对象{}
          2、数组【】
JSON中允许的值：字符串、数值、布尔值、null、对象、数组
将JSON对象转换为字符串
            -在JS中提供的工具类JSON，可以将JSON转换为JS对象，也可以将JS对象转换为JSON
            -JSON.parse();可以将JSON字符串转换为JS对象并返回
 例如：JSON.parse(json);
 将JS对象转换为JSON
            -JSON。stringify();需要一个JS对象作为参数，返回一个JSON字符串