欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS实现轮播图

程序员文章站 2022-06-02 11:25:48
...

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


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


效果图:

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设置鼠标进入事件,对其改变背景。

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);
	}

}