基础轮播图


	<body>
		<!-- 轮播图开始 -->
		<div id="banner">
			<!-- 图片盒子 -->
			<div id="tu">
				<img src="img/0.jpg" class="xian">
				<img src="img/1.jpg">
				<img src="img/2.jpg">
				<img src="img/3.jpg">
				<img src="img/4.jpg">
			</div>
			<div class="clear"></div>
			<!-- 小圆点盒子 -->
			<ul id="dian">
				<li class="red">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<div class="clear"></div>
			</ul>
			<!-- 按钮盒子 -->
			<div id="left"></div>
			<div id="right"></div>
		</div>
	</body>

/*公共样式*/
*{margin:0px;padding:0px;}
li{list-style: none;display: inline-block;}
.clear{clear: both;}
/*页面样式*/
#banner{
	width: 730px;
	height: 454px;
	margin: 50px auto;
	overflow: hidden;
	position: relative;
}

#tu img{display: none;}
#tu .xian{display: block;}
/*公共样式*/
*{margin:0px; padding: 0px;}
li{list-style: none;}
.clear{clear:both;}
/* 测试样式表是否链接好了 */
/*body{background: red;} */
/*页面样式*/
#banner{
	width:730px;
	height:454px;
	margin:50px auto;
	position: relative;
	overflow: hidden;
}
#tu img{display: none;}
#tu .xian{display:block;}
#dian{
	position:absolute;
	bottom:10px;
	left:300px;
}
#dian li{
	width:20px;
	height: 20px;
	background: #000;
	float: left;
	margin-right: 10px;
	text-align: center;
	color:#fff;
	border-radius:50%;
}

#dian li.red{background: red;}

#left{
	width:55px;
	height: 55px;
	background: url('../img/zuo.png') -3px -5px;
	position:absolute;
	left:20px;
	bottom:200px;
	border-radius:50%;
	display: none;
}
#right{
	width:55px;
	height: 55px;
	background: url('../img/you.png') -1px 2px;
	position:absolute;
	right:20px;
	bottom:200px;
	border-radius:50%;
	display: none;
}

#banner:hover #left,#banner:hover #right{display: block;}

window.onload = function () {
	//alert(11111);//验证外部js是否链接正确
	//1.获得节点
	var oDiv = document.getElementById("tu");//放图片的div
	var imgs = oDiv.getElementsByTagName("img");//图片集合
	console.log(imgs);
	var Dian = document.getElementById("dian");//放小圆点的ul
	var oLi = Dian.getElementsByTagName("li");//放小圆点的li集合
    console.log(oLi);
    var Banner = document.getElementById("banner");
    console.log(Banner);
    var Left = document.getElementById("left");
    console.log(Left);
    var Right = document.getElementById("right");
    console.log(Right);
	var index = 0 ;//存放索引号，一定得放在函数外面，放在函数里面的话，会一直显示第一张(做全局变量)
	function tu(){
		index++;//定时器每调用一次函数，index值每次自加一个
		if(index == 5 ){//当index的值为5时，图片集合中没有索引为5的图片，索引重新给index赋值为0，让图片再从第一张图片开始
			index = 0;
		}
		fu();
		/*//一.处理图片
		//先隐藏5张
		for (var i = 0; i < imgs.length; i++) {
			imgs[i].style.display = "none";
		}
		//再显示需要展示的那一张
		imgs[index].style.display = "block";
	
		//二.处理小圆点
		//首先都是黑色背景
		for (var i = 0; i < oLi.length; i++) {
			oLi[i].style.background = "#000000";
		}
		//和显示的图片索引相同的小圆点变红
		oLi[index].style.background = "red";
*/
	}
	//三.加定时器 让小圆点和图片动起来
	//然后每隔一段时间换一张图片
	var t = setInterval(tu,1000);

	//四移入banner图时，图片停止变换
	Banner.onmouseover = function(){
		clearInterval(t);
	}
	//五移出banner时，图片继续变化
	Banner.onmouseout = function(){
		t = setInterval(tu,1000);
	}

	//六.移入小圆点，显示索引对应的图片
	for (var j = 0; j < oLi.length; j++) {
		oLi[j].suoYin = j;//把小圆点的索引存在j里面
		oLi[j].onmouseover = function(){
			index = this.suoYin//移入小圆点的索引
			fu();
			/*//先隐藏5张
			for (var i = 0; i < imgs.length; i++) {
				imgs[i].style.display = "none";
			}
			//再显示需要展示的那一张
			imgs[index].style.display = "block";

			//首先都是黑色背景
			for (var i = 0; i < oLi.length; i++) {
				oLi[i].style.background = "#000000";
			}
			//和显示的图片索引相同的小圆点变红
			oLi[index].style.background = "red";*/
		}//移入事件结束符
	}//for循环结束

	//七点击左按钮，显示后一张
	Left.onclick = function(){
			/*//先隐藏5张
			for (var i = 0; i < imgs.length; i++) {
				imgs[i].style.display = "none";
			}*/
			//把index值加1，显示后一张
			index = index+1;
			//重新定义index，让它等于5的时候index值等于0
			if (index == 5) {
				index = 0 ;
			} 
			fu();
			/*//再显示需要展示的那一张
			imgs[index].style.display = "block";
			//首先都是黑色背景
			for (var i = 0; i < oLi.length; i++) {
				oLi[i].style.background = "#000000";
			}
			//和显示的图片索引相同的小圆点变红
			oLi[index].style.background = "red";*/
	}
	//八.点击右边按钮，显示前一张
	Right.onclick = function(){
			/*//先隐藏5张
			for (var i = 0; i < imgs.length; i++) {
				imgs[i].style.display = "none";
			}*/
			//把index值减1，显示前一张
			index = index-1;
			//重新定义index，让它等于5的时候index值等于0
			if (index == -1) {
				index = 4 ;
			} 
			fu();
			/*//再显示需要展示的那一张
			imgs[index].style.display = "block";
			//首先都是黑色背景
			for (var i = 0; i < oLi.length; i++) {
				oLi[i].style.background = "#000000";
			}
			//和显示的图片索引相同的小圆点变红
			oLi[index].style.background = "red";
			*/
	}

	//九.优化代码，将重复使用的代码封装到函数中，在需要的位置调用函数即可
	function fu(){
			//先隐藏5张
			for (var i = 0; i < imgs.length; i++) {
				imgs[i].style.display = "none";
			}
			//再显示需要展示的那一张
			imgs[index].style.display = "block";

			//首先都是黑色背景
			for (var i = 0; i < oLi.length; i++) {
				oLi[i].style.background = "#000000";
			}
			//和显示的图片索引相同的小圆点变红
			oLi[index].style.background = "red";
	}
}

猜你喜欢