JS基础-轮播图的实现-尚硅谷-P134-136

视频
视频链接
代码:

代码中插入的tools.js代码链接:
JS基础-定时器的应用-尚硅谷-P131-133

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#outer{
			width: 520px;
			height: 333px;
			margin: 50px auto;
			background-color: greenyellow;
			padding: 10px 0;
			position: relative;
			/* 裁剪溢出的内容*/
			 overflow: hidden; 
		}
		#imgList{
			list-style: none;
			width: 2100px;
			position: absolute;
			/* 每向左移动520 就会显示下一张 */
			left: 0px;
		}
		#imgList li{
			/* 设置浮动 */
			float: left;
			margin: 0 10px;
			
		}
		/* 设置导航按钮 */
		#navDiv{
			position: absolute;/*开启绝对定位*/
			/* 设置位置 */
			bottom: 15px;
		}
		#navDiv a{
			float: left;
			/*设置超链接的宽和高*/
			width: 15px;
			height: 15px;
			background-color: #FF0000;
			margin: 0 5px;
			opacity: 0.5;
			fill-opacity: alpha(opacity=50);/*兼容IE8*/
		}
		#navDiv a:hover{
			background-color: black;
		}
		</style>
		<!-- 引入工具 -->
		<script type="text/javascript" src="./js/tools.js"></script>
		<script type="text/javascript">
			window.onload=function(){
				var imgList=document.getElementById("imgList");
				var imgArr=document.getElementsByTagName("img");
				//设置imgList宽度
				imgList.style.width=520*imgArr.length+"px";
				/**
				 * 设置导航按钮居中
				 * 获取imgDiv
				 */
				var navDiv=document.getElementById("navDiv");
				var outer=document.getElementById("outer");
				navDiv.style.left=(outer.offsetWidth-navDiv.offsetWidth)/2+"px";
				var allA=document.getElementsByTagName("a");
				var index=0;
				/**
				 * 设置默认选中效果
				 */
				allA[index].style.backgroundColor="black";
				/**
				 * 点击超链接切换到指定的图片
				 */
				for(var i=0;i<allA.length;i++){
					allA[i].num=i;
					//单击响应函数
					allA[i].onclick=function(){
						//关闭自动切换的定时器
						clearInterval(timer);
						index=this.num;
						//imgList.style.left=-index*520+"px";//切换图片
						allA[index].style.backgroundColor="black";
						setA();
						//使用move函数切换对象
						move(imgList,"left",-520*index,20,function(){
							//动画执行完毕 ,开启自动切换
							autoChange();
						});
					}
				}
				/**
				 * 自动切换
				 */
				autoChange();
				
				
				//创建一个方法设置选中a
				function setA(){
					//判断当前索引是否是最后一张
					if(index>=imgArr.length-1){
						index=0;
						//此时显示的是最后一张图片,而最后一张图片和第一张是一模一样的
						//通过CSS将最后一张换成第一张
						imgList.style.left=0;
						
					}
					//遍历所有的a 并将他们的背景颜色设置为红色
					for(var i=0;i<allA.length;i++){
							allA[i].style.backgroundColor="";
					}
					//将选中的a设置为黑色
						allA[index].style.backgroundColor="black";
				}
				/**
				 * 创建一个函数用来开启自动切换
				 */
				//定义一个自动切换的定时器的标识
				var timer;
				function autoChange(){
					//开启一个定时器 用来定时切换图片
					timer=setInterval(function(){
						index++;
						index=index%imgArr.length;
						move(imgList,"left",-520*index,20,function(){					
							//修改导航点
							setA();
						});
					},3000);
				}
			}
		</script>
	</head>
	<body>
		<!-- 创建一个大的div作为大的容器 -->
		<div id="outer">
			<!-- 创建一个ul用于放置图片 -->
			<ul id="imgList"> 
				<li>
					<img id="img1" src="./img/1.jpg" width="500px" height="333px" />					
				</li>
				<li>
					<img id="img2" src="./img/2.jpg" width="500px" height="333px"/>					
				</li>
				<li>
					<img id="img3" src="./img/3.jpg" width="500px" height="333px"/>					
				</li>
				<li>
					<img id="img4" src="./img/4.jpg" width="500px" height="333px"/>					
				</li>
				<li>
					<img id="img1" src="./img/1.jpg" width="500px" height="333px" />					
				</li>
			</ul>
			<!-- 创建导航按钮 -->
			<div id="navDiv">
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
			</div>
		</div>
	</body>
</html>

你可能感兴趣的:(JS,javascript,前端,html5)