js基础-轮播图演示

最新推荐文章于 2023-10-06 23:43:32 发布

fire_zero

最新推荐文章于 2023-10-06 23:43:32 发布

阅读量257

点赞数 1

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/fire_zero/article/details/103930013

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

轮播图

一、功能

功能一：鼠标移入图片按钮浮现，移出消失
功能二：点击按钮切换相应方向的图片，且相应的小圆点变色
功能三：点击小圆点变色，并切换相应图片
功能四：鼠标移入图片开启自动轮播，移出关闭

直接查看完整代码

二、介绍

使用定时器制作简单的自动轮播图
点击轮播主要是使用onclick点击事件使轮播图在点击按钮时能向向左向右切换

1、HTML代码

注意：第一张和最后一张图片是特殊的，具体在js里我会另外说明。
另外，由于我的按钮样式是直接写的‘><’,所以后续的代码折叠功能可能会出现问题，但不影响代码的运行。
建议写的时候使用图标样式来写，我这里由于时间问题就不作修改了。

代码如下：

<div id="box">
	<ul class="list">
		<li><img src="img/4.jpg"></li>
		<li><img src="img/1.jpg"></li>
		<li><img src="img/2.jpg"></li>
		<li><img src="img/3.jpg"></li>
		<li><img src="img/4.jpg"></li>
		<li><img src="img/1.jpg"></li>
	</ul>
	<ul class="iconList">
		<li class="current"></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<span class="left"><</span>
	<span class="right">></span>
</div>

2、CSS代码

国际惯例，先清除内置的css格式；
然后设置box，ul，li,img的属性
box为外层盒子，盒子里设置两个ul
第一个ul内包含6个li，,为li设置浮动属性，并设置ul和li的大小正好包含
每个li内都包含一个img，img大小设置和box一样大小
第二个ul内包含4个li
li使用border-radius设置为圆形

注1：两个ul都需要设置并设置绝对定位，且box设置相对定位
注2：box需要设置overflow：hidden;来隐藏不需要显示的图片

效果图如下：
在这里插入图片描述

css代码如下：

<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}

	ul,
	li {
		list-style: none;
	}

	img {
		display: block;
	}

	.clearFix:after {
		content: '';
		display: block;
		clear: both;
	}

	#box {
		width: 450px;
		height: 300px;
		margin: 50px auto;
		overflow: hidden;
		position: relative;
	}

	#box .list {
		width: 2700px;
		height: 300px;
		position: absolute;
		left: -450px;
	}

	#box .list li {
		width: 450px;
		height: 300px;
		float: left;
	}

	#box .list li img {
		width: 450px;
		height: 300px;
	}

	#box .iconList {
		position: absolute;
		left: 50%;
		bottom: 10px;
		transform: translateX(-50px);
		/* overflow: hidden;和position: absolute;都能开启BFC，达到清除浮动的效果 */

	}

	#box .iconList li {
		float: left;
		width: 20px;
		height: 20px;
		border-radius: 10px;
		background-color: #808080;
		margin: 5px;
	}

	#box .iconList li.current {
		background-color: red;
	}

	#box span {
		position: absolute;
		width: 30px;
		height: 50px;
		top: 50%;
		transform: translateY(-50%);
		color: white;
		background: #808080;
		font-size: 25px;
		line-height: 50px;
		text-align: center;
		opacity: 0;
		cursor: pointer;
		/* transition: opacity 2s; */
		/* transition只能监测到开始和结束 ,不能监测到中间的*/
	}

	#box .left {
		left: 0px;
	}

	#box .right {
		right: 0px;
	}
</style>

3、js代码

简单的思路讲解：

轮播图的本质：
移动包含图片的ul,
使需要的图片显示在box中，而不需要的则隐藏起来
所以，
只需要为包含图片的ul设置left值，
即可使图片左右移动

另外：
由于整个轮播图中，点击按钮移动图片、点击小圆点移动图片、和自动轮播图片的本质都只是移动轮播图；
所以，直接写一个图片移动的函数，并在点击事件和自动轮播中调用即可。

其他的由于在不看代码时讲解不清
所以我在代码中写了详细的注释，直接查看js代码即可

js代码如下：

<script type="text/javascript">
			window.onload = function() {
				var box = document.querySelector('#box');
				var ulNode = document.querySelector('#box .list');
				var icoLiNode = document.querySelectorAll('#box .iconList li');
				var spanNodes = document.querySelectorAll('span');
				var time = 450; //每次点击移动的总时间
				var eachTime = 10; //每步移动的时间
				var isMove = false;
				box.onmouseover = function() {
					spanNodes[0].style.opacity = '1';
					spanNodes[1].style.opacity = '1';
					//鼠标移入自动轮播
					timer2 = setInterval(function() {
						move(false);
					}, 3000);
				}
				box.onmouseout = function() {
					spanNodes[0].style.opacity = '0';
					spanNodes[1].style.opacity = '0';
					//鼠标移出关闭自动轮播
					clearInterval(timer2);
				}

				// 轮播图移动函数
				function move(flag) {
					//防止函数同时被多个事件调用。
					// 设置一个标志位，根据标志位的状态来判断是否有人正在调用该函数，
					// 若标志位状态为true，则代表该函数正在被调用，无法再调用。以保证同时只有一个事件调用该函数
					if (isMove) {
						return;
					}
					isMove = true;
					// 设置轮播图在每次点击中要移动的距离
					var ulEachMove = 0;
					// 判断调用该函数的事件，并设置不同的移动值
					if (flag) {
						ulEachMove = box.clientWidth;
					} else {
						ulEachMove = -box.clientWidth;
					}
					var ulLastLeft = ulNode.offsetLeft + ulEachMove;
					var eachUlMove = ulEachMove * eachTime / time;
					// 设置循环定时器使轮播图平滑的移动
					timer = setInterval(function() {
						var a = ulNode.offsetLeft + eachUlMove;
						if (flag) {
							if (a >= ulLastLeft) {
								clearInterval(timer);
								isMove = false;
							}
						} else {
							if (a <= ulLastLeft) {
								clearInterval(timer);
								isMove = false;
							}
						}
						//这里就是为什么只有4个图片却设置了六个img的原因了
						//使轮播图可以无缝切换
						if (a <= -2250) {
						//即：图片轮播到最后一个时，还要往后轮播，则切换回第一个图片
							a = -450;
						} else if (a >= 0) {
						//即：图片轮播到第一个时，还要往前轮播，则切换回最后一个图片
							a = -1800;
						}
						ulNode.style.left = a + 'px';
					}, eachTime);
					//设置小圆点随图片的轮播变色
					for (var i = 0; i < icoLiNode.length; i++) {
						icoLiNode[i].className = '';
					}
					var index = -ulLastLeft / box.clientWidth - 1;
					if (index > 3) {
						index = 0;
					} else if (index < 0) {
						index = 3;
					}
					icoLiNode[index].className = 'current';
				}

				spanNodes[0].onclick = function() {
					move(true);
					console.log(1);
				}
				spanNodes[1].onclick = function() {
					move(false);
				}
				//点击小圆点改变图片
				for (var i = 0; i < icoLiNode.length; i++) {
					// 为icoLiNode[i]添加属性，使得在内循环中也能获取i的值
					icoLiNode[i].index = i;
					icoLiNode[i].onclick = function() {
						//使用排它实现点击变色
						for (var j = 0; j < icoLiNode.length; j++) {
							icoLiNode[j].className = '';
						}
						this.className = 'current';
						// 获取小圆点的下标，并加1
						var a = this.index + 1;
						// 设置ul向左平移的距离
						ulNode.style.left = -a * box.clientWidth + 'px';
					}
				}


			}
		</script>

[完整项目度盘地址：](https://pan.baidu.com/s/1mvCBshdQnwwt2sr4FbLSRQ)

完整代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;

			}

			ul,
			li {
				list-style: none;
			}

			a {
				text-decoration: none;
			}

			img {
				display: block;
			}

			input {
				outline: none;
			}

			.clearFix:after {
				content: '';
				display: block;
				clear: both;
			}

			#box {
				width: 450px;
				height: 300px;
				margin: 50px auto;
				overflow: hidden;
				position: relative;
			}

			#box .list {
				width: 2700px;
				height: 300px;
				position: absolute;
				left: -450px;
			}

			#box .list li {
				width: 450px;
				height: 300px;
				float: left;
			}

			#box .list li img {
				width: 450px;
				height: 300px;
			}

			#box .iconList {
				position: absolute;
				left: 50%;
				bottom: 10px;
				transform: translateX(-50px);
				/* overflow: hidden;和position: absolute;都能开启BFC，达到清除浮动的效果 */

			}

			#box .iconList li {
				float: left;
				width: 20px;
				height: 20px;
				border-radius: 10px;
				background-color: #808080;
				margin: 5px;
			}

			#box .iconList li.current {
				background-color: red;
			}

			#box span {
				position: absolute;
				width: 30px;
				height: 50px;
				top: 50%;
				transform: translateY(-50%);
				color: white;
				background: #808080;
				font-size: 25px;
				line-height: 50px;
				text-align: center;
				opacity: 0;
				cursor: pointer;
				/* transition: opacity 2s; */
				/* transition只能监测到开始和结束 ,不能监测到中间的*/
			}

			#box .left {
				left: 0px;
			}

			#box .right {
				right: 0px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul class="list">
				<li><img src="img/4.jpg"></li>
				<li><img src="img/1.jpg"></li>
				<li><img src="img/2.jpg"></li>
				<li><img src="img/3.jpg"></li>
				<li><img src="img/4.jpg"></li>
				<li><img src="img/1.jpg"></li>
			</ul>
			<ul class="iconList">
				<li class="current"></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<span class="left">
				<</span> <span class="right">>
			</span>
		</div>
		<script type="text/javascript">
			window.onload = function() {
				var box = document.querySelector('#box');
				var ulNode = document.querySelector('#box .list');
				var icoLiNode = document.querySelectorAll('#box .iconList li');
				var spanNodes = document.querySelectorAll('span');
				var time = 450; //每次点击移动的总时间
				var eachTime = 10; //每步移动的时间
				var isMove = false;
				box.onmouseover = function() {
					spanNodes[0].style.opacity = '1';
					spanNodes[1].style.opacity = '1';
					//鼠标移入自动轮播
					timer2 = setInterval(function() {
						move(false);
					}, 3000);
				}
				box.onmouseout = function() {
					spanNodes[0].style.opacity = '0';
					spanNodes[1].style.opacity = '0';
					//鼠标移出关闭自动轮播
					clearInterval(timer2);
				}

				// 轮播图移动函数
				function move(flag){
					//防止函数同时被多个事件调用。
					// 设置一个标志位，根据标志位的状态来判断是否有人正在调用该函数，
					// 若标志位状态为true，则代表该函数正在被调用，无法再调用。以保证同时只有一个事件调用该函数
					if (isMove) {
						return;
					}
					isMove = true;
					// 设置轮播图在每次点击中要移动的距离
					var ulEachMove =0;
					// 判断调用该函数的事件，并设置不同的移动值
					if(flag){
						ulEachMove = box.clientWidth;
					}else{
						ulEachMove = -box.clientWidth;
					}
					var ulLastLeft = ulNode.offsetLeft + ulEachMove;
					var eachUlMove = ulEachMove * eachTime / time;
					// 设置循环定时器使轮播图平滑的移动
					timer = setInterval(function() {
						var a = ulNode.offsetLeft + eachUlMove;
						console.log(a);
						
						if(flag){
							if (a >= ulLastLeft) {
								clearInterval(timer);
								isMove = false;
							}
						}else{
							if (a <= ulLastLeft) {
								clearInterval(timer);
								isMove = false;
							}
						}
						if (a <= -2250) {
							a = -450;
						} else if (a >= 0) {
							a = -1800;
						}
						ulNode.style.left = a + 'px';
					}, eachTime);
					//设置小圆点随图片的轮播变色
					for (var i = 0; i < icoLiNode.length; i++) {
						icoLiNode[i].className = '';
					}
					var index = -ulLastLeft / box.clientWidth - 1;
					if (index > 3) {
						index = 0;
					} else if (index < 0) {
						index = 3;
					}
					icoLiNode[index].className = 'current';
				}
				
				spanNodes[0].onclick = function() {
					move(true);	
					console.log(1);
				}
				spanNodes[1].onclick = function() {
					move(false);
					console.log(2);
				}
				//点击小圆点改变图片
				for(var i = 0; i<icoLiNode.length;i++){
					// 为icoLiNode[i]添加属性，使得在内循环中也能获取i的值
					icoLiNode[i].index = i;
					icoLiNode[i].onclick=function(){
						//使用排它实现点击变色
						for (var j = 0; j < icoLiNode.length; j++) {
							icoLiNode[j].className = '';
						}
						this.className = 'current';
						// 获取小圆点的下标，并加1
						var a = this.index +1;
						// 设置ul向左平移的距离
						ulNode.style.left = -a*box.clientWidth +'px';
					}
				}
				
			
			}
		</script>
	</body>
</html>

fire_zero

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js基础-轮播图演示

轮播图一、功能功能一：鼠标移入图片按钮浮现，移出消失功能二：点击按钮切换相应方向的图片，且相应的小圆点变色功能三：点击小圆点变色，并切换相应图片功能四：鼠标移入图片开启自动轮播，移出关闭直接查看完整代码二、介绍使用定时器制作简单的轮播图主要是使用点击事件使轮播图在点击按钮时能1、HTML代码      注意：第...
复制链接

扫一扫