HTML+CSS+JS实现轮播图

轮播图功能：自动轮播，上一个和下一个按钮，下边的圆框实现滑过换页。仿照网购网站编写。

写HTML分三步走，第一步：搭基础，即编写HTML界面；第二步：写样式，即编写css使编写的控件按照一定的格式显示，达到美观的效果。第三步：动起来，即编写js文件达到动态的效果。

效果图：

当鼠标放在图片上，左右两边的按钮出现，画面停止，下边的小圆框会跟着图变化，鼠标滑动上去会达到跳转页的效果。

第一步：写HTML：

首先我们要有一个框来展示我们的图片，这个是背景图的显示，然后给其换背景图来达到换页的效果，其次在框里我们要有下边的小圆框，这个我们可以用ul来实现，其次左右的换页，也是两个div框。这样基本的框架就搭好了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>轮播</title>
		<link rel="stylesheet" href="css/轮播.css" />
		<script type="text/javascript" src="js/轮播.js" ></script>
	</head>
	<body>
		<div id="box">
			<img id="pic" src="img/1.jpg" />
			<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 class="btn" id="left"> &lt;</div>
			<div class="btn" id="right">&gt;</div>
		</div>
	</body>
</html>

第二步：写css：

css实现的时候就要达到布局位置的改变。首先我们的框的位置在屏幕的中央，其次左右两个div的摆放，左右和上下的剧中男，最后最难的是ul的摆放，首先将其原来的格式去掉之后把框的形状变为圆形。最后再摆到位置上。

*{
	margin: 0;
	padding: 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: 40px;
	text-align: center;
	line-height: 100px;
	position: absolute;
	top: 120px;
	display: none;
}

#left{
	left: 0px;
}
#right{
	right: 0px;
}
ul {
	list-style: none;
	position: absolute;
	bottom: 20px;
	left: 230px;
}
ul li{
	float: left;
	width: 20px;
	height: 20px;
	margin-left: 10px;
	background-color: #aaa;
	text-align: center;
	line-height: 20px;
	border-radius: 50%;
}

第三步：js文件的编写：

用到的是原生js代码，首先就是达到自动的换页，这个可以写个定时器，每隔一段时间改变一下背景，之后要注意其循环，在到最后一个的时候对其改变其起始index。之后是写鼠标进入时间和移出事件，在进入时，移除定时器，左右按钮的显示。在最后对ul设置鼠标进入事件，对其改变背景。

扫描二维码关注公众号，回复： 3201324 查看本文章

window.onload = function() {
	var box = document.getElementById("box");
	var ul = document.getElementById("list");
	var img = document.getElementById("pic");
	var left_btn = document.getElementById("left");
	var right_btn = document.getElementById("right");
	var allLi = document.getElementsByTagName("li");
	//第一步 ：第一个按钮设置为红色
	var currentNUM = 1;
	allLi[0].style.backgroundColor = "red";
	//第二步：让图片循环改变
	var timer = setInterval(startloop, 2000);
	function startloop() {
		currentNUM++
		changeIMG()
	}
	function changeIMG() {
		if(currentNUM == 0) {
			currentNUM = 8;
		}
		if(currentNUM == 9) {
			currentNUM = 1;
		}
		img.src = "img/" + currentNUM + ".jpg";
		//清空小圆点颜色，改变下一个颜色		
		for(var i = 0; i < allLi.length; i++) {
			allLi[i].style.backgroundColor = "#aaa";
		}
		allLi[currentNUM - 1].style.backgroundColor = "red"; //设置当前的颜色的
	};

	//第三步：鼠标进入box和离开
	box.addEventListener("mouseover", function() {
		//左右显示出来
		left_btn.style.display = "block";
		right_btn.style.display = "block";
		window.clearInterval(timer);
	}, false);
	box.addEventListener("mouseout", function() {
		left_btn.style.display = "none";
		right_btn.style.display = "none";
		timer = setInterval(startloop, 2000);
	}, false);
	//第四步： 点击左右按钮
	left_btn.addEventListener("mouseover", deep, false);
	left_btn.addEventListener("mouseout", nodeep, false);
	right_btn.addEventListener("mouseover", deep, false);
	right_btn.addEventListener("mouseout", nodeep, false);
	left_btn.addEventListener("click", function() {
		currentNUM--;
		changeIMG();
	}, false);
	right_btn.addEventListener("click", startloop, false);

	function deep() {
		this.style.backgroundColor = "rgba(0,0,0,0.4)";
	};
	function nodeep() {
		this.style.backgroundColor = "rgba(0,0,0,0.2)";
	};
	//第五步：小圆点的转换
	for(var i = 0; i < allLi.length; i++) {
		allLi[i].index = i + 1;
		allLi[i].addEventListener("mouseover", function() {
			allLi[0].style.backgroundColor = "#aaa"
			currentNUM = this.index;
			console.log(currentNUM)
			changeIMG();
		}, false);
	}

}

HTML+CSS+JS实现轮播图

猜你喜欢