js练习之轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/tools01.js">
			
		</script>
		<style type="text/css">
			*{
				margin:0px;
				padding:0px;
			}
			#box{
				width:520px;
				height:333px;
				background-color: yellowgreen;
				/* 让div整体居中,且距上边框80px*/
				margin: 80px auto;
				/*设置内边距,上下可以显示出div的背景颜色*/
				padding: 10px 0px ;
				position:relative;
				/*只显示当前div中的图片,剪裁溢出的内容*/
				/*overflow:hidden;*/
			}
			#picList{
				/*去除ul的小黑点*/
				list-style: none;
				/*要想移动ul中的图片,首先得设置绝对定位,并且设置其父元素div为
				 * 相对定位
				 */
				position:absolute;
				/*设置定位后才能操作left、right、top、bottom
				 使用js代码控制*/
				/*就这一个地方不对,导致内置浏览器无法显示切换图片动画*/
				left:0px;
			}
			#picList li{
				/*向左浮动:
				 * 让li标签可以并列成一排
				 	需要设置ul的宽度,ul的宽度应该等于所有图片的宽度之和
				 * */
				float:left;
				/*
				 * 设置图片之间的边距,先左右后上下,之后要再次增加ul和div的width			 
				 * */
				margin: 0px 10px;
			}
			#navList{
				/*开启定位后才能设置位置属性*/
				position: absolute;
				bottom:15px;
			}
			#navList a{
				/*要点2:超链接浮动*/
				float:left;
				width: 15px;
				height: 15px;
				background-color: red;
				margin:0 5px;
				opacity: 0.5;
			}
			#navList a:hover{
				background-color: black;
			}
		</style>

		<script type="text/javascript">
			window.onload = function(){
				var picList = document.getElementById("picList");
				var img = document.getElementsByTagName("img");
				//动态修改ul的width,解决图片数量增加减少的问题
				//要点1:内联样式要加px
				picList.style.width = 520 * img.length + "px";
				
				//导航栏居中设置:(外部div的宽度-导航栏div的宽度)/2
				var box = document.querySelector("div");
				//要点3:box.style.backgroundColor 获取的是内联样式,如果要获取当前样式,
				// 使用getComputedStyle(对象,null);
//				var obj = getComputedStyle(box,null);
				var navList = document.querySelector("#navList");
				navList.style.left  = (box.clientWidth - navList.clientWidth) / 2 + "px";
				
				
				//设置默认图片
				var index = 0;
				var a = document.querySelectorAll("a");
				// 要点4:赋值一定要加双引号
				a[index].style.backgroundColor = "black";
				
				// 点击导航栏按钮切换图片:给每个超链接绑定单击事件
				for(var i=0;i<a.length;i++){
					//要点5:因为响应函数中并不能获取相应的索引,所以给超链接设置一个index属性,
					//		用于存放当前索引值;
					a[i].num = i;
					a[i].onclick = function(){
						
						//要点8:点击导航栏之后应该先关闭自动切换,timer要设置为全局变量
						clearInterval(timer);
					
						// 要点6:之所以设置全局变量index,是为了让【导航栏点击切换】和【自动切换】
						// 			共用一个index,当点击导航栏按钮切换后,自动切换就从当前图片开始。
						index = this.num;
						
						//直接切换,没有动画效果
//						picList.style.left = -520 * index + "px";

						
						// 调用move切换
						set();
						move(picList,"left",-520*index,20,function(){
							//当点击换页结束后开去自动换页
							autoMove();
						});
						
					}
				}
				
				autoMove();
				// 自动切换图片:
				var timer;
				function autoMove(){
					 timer = setInterval(function(){
						index++;
						// 使index一直循环
						index %= img.length;
						move(picList,"left",-520*index,20,function(){
							// 要点9(偷天换日):首尾图片一样,当自动切换到最后一张图片时,
							// 					因为和第一张一样,故将ul的left属性改为第一张的left值,
									// 这样就在不知不觉中切换成第一张图片了
								if(index == img.length - 1){
									index = 0;
									picList.style.left = 0;
								}
								set();
						});
					},1000);
				}
				// 辅助变量:存放之前播放的图片对应的按钮索引,初始值为0,一开始播放第一张图片
				var preIndex = 0;
				//改变选中按钮的颜色
				function set(){
					此处可以不用循环改变每一个按钮的样式,可以采用一个辅助变量存放之前
					播放的图片对应的按钮索引,只要修改它一个即可。
					//for(var i = 0;i<a.length;i++){
						//要点7:设置内联样式后样式表样式就会失效,故让内联样式为空,
						//  	去找样式表样式,这样hover就不会失效
						//a[i].style.backgroundColor = "";
					//}
					a[preIndex].style.backgroundColor = "";
					a[index].style.backgroundColor = "black";
					preIndex = index;
				}

			}
		</script>
	</head>
	<body>
		<div id="box">
			<ul id="picList">
				<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/1.jpg"/></li>
			</ul>
			<!--导航栏-->
			<div id="navList">
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
			</div>
		</div>
	</body>
</html>

外部js文件jstool.js

/*
				 * 参数:
				 *    	-obj 要操作的目标元素
				 * 		-attr 要操作元素的属性
				 * 		-target 目标值
				 * 		-speed 速度 
				 * 		-callback 回响函数
				 * */
function move(obj,attr,target,speed,callback){
		//关闭上一个同类定时器,如果不关,每按一次按钮,将再次开启一个定时器,导致函数执行的速度加快;
		clearInterval(obj.timer);
		// 判断移动的方向来设置速度的正负
		var current = getComputedStyle(obj,null)[attr];
		current = parseInt(current);
		if(current > target)
			speed = -speed;
		obj.timer = setInterval(function(){
			// 这里不能使用上边的current,因为current不变,而元素的实际值一直在改变
			var oldValue = getComputedStyle(obj,null)[attr];
			// getComputedStyle()返回值中含有px,故要用parseInt()将数值分离出来
			var newValue = parseInt(oldValue) + speed;
			if(newValue > target && speed > 0 || newValue < target && speed <0)
				newValue = target;
			// 这里注意,obj.style.样式,此处的样式也是属性,故可以使用[""]访问
			obj.style[attr] = newValue + "px";
			if(newValue == target){
				clearInterval(obj.timer);
				//动画执行完毕,调用callback
				callback && callback();
		}
		},30);
			
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值