JavaScript项目案例-JS原生轮播图-组团学

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>轮播图</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<script type="text/javascript" src="js/loop.js" ></script>
	</head>
	<body>
		<div id="box">
			<a href="#"><img id="pic" src="img/1.jpg" /></a>
			<ul id="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
			</ul>
			<div id="left" class="btn">&lt;</div>
			<div id="right" class="btn">&gt;</div>
		</div>
	</body>
</html>

style.css

*{
	padding: 0;
	margin: 0;
}
#box{
	width: 790px;
	height: 340px;
	margin: 0 auto;
	position: relative;
}
.btn{
	width: 50px;
	height: 100px;
	color: #fff;
	background-color: rgba(0,0,0,0.2);
	font-size: 30px;
	text-align: center;
	line-height: 100px;
	position: absolute;
	top: 120px;
	display: none;
}
#left{
	left: 0;
}
#right{
	right: 0;
}
ul{
	list-style: none;
	position: absolute;
	bottom: 20px;
	left: 280px;
}
ul li{
	float: left;
	width: 20px;
	height: 20px;
	margin-left: 10px;
	background-color: #aaa;
	text-align: center;
	line-height: 20px;
	border-radius: 50%;
}

loop.js

window.onload = function(){
	var box = document.getElementById("box");
	var ul = document.getElementById("list");
	var img = document.getElementById("pic");
	var leftBtn = document.getElementById("left");
	var rightBtn = document.getElementById("right");
	var allLi = document.getElementsByTagName("li")
	
	//1第一个li设置为红色
	allLi[0].style.backgroundColor = "red";
	
	// 2让图片循环改变
	var currentNum = 1;
	var timer = setInterval(startLoop, 1000);
	function startLoop(){
		currentNum++;
		changeImg();
	}
	function changeImg(){
		if (currentNum == 9){
			currentNum = 1;
		} else if (currentNum == 0) {
			currentNum = 8;
		}
		img.src = "img/" + currentNum + ".jpg";
		//清空小圆点颜色
		for (var i = 0; i < allLi.length; i++){
			allLi[i].style.backgroundColor = "#aaa";
		}
		//修改小圆点颜色
		allLi[currentNum - 1].style.backgroundColor = "red";
	}
	
	//3鼠标进入box
	//4鼠标离开box
	box.addEventListener("mouseover",function(){
		//停定时器
		clearInterval(timer);
		//显示左右按钮
		leftBtn.style.display = "block";
		rightBtn.style.display = "block";
	},false);
	box.addEventListener("mouseout",function(){
		//重启定时器
		timer = setInterval(startLoop, 1000);
		//隐藏左右按钮
		leftBtn.style.display = "none";
		rightBtn.style.display = "none";
	},false);
	
	//5点击左右按钮
	leftBtn.addEventListener("mouseover", deep,false);
	rightBtn.addEventListener("mouseover", deep,false);
	function deep(){
		this.style.backgroundColor = "rgba(0,0,0,0.6)";
	}
	leftBtn.addEventListener("mouseout", nodeep,false);
	rightBtn.addEventListener("mouseout", nodeep,false);
	function nodeep(){
		this.style.backgroundColor = "rgba(0,0,0,0.2)";
	}
	leftBtn.addEventListener("click", function(){
		currentNum--;
		changeImg();
	},false);
	rightBtn.addEventListener("click", function(){
		currentNum++;
		changeImg();
	},false);
	
	
	//6进入小圆点
	for (var i = 0; i < allLi.length; i++){
		allLi[i].index = i + 1;
		allLi[i].addEventListener("mouseover", function(){
			currentNum = this.index;
			changeImg();
		}, false);
	}
}