js基础-轮播图演示

轮播图


一、功能

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


直接查看完整代码

二、介绍

使用定时器制作简单的自动轮播图
点击轮播主要是使用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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值