制作一个简单的轮播图

记录一下轮播图制作（这里用的是原生js制作的）前期准备工作1、自己用的顺手的开发工具，我这里用的时HBuilder来写的2、创建项目3、在项目中创建images、js文件夹，把需要制作成轮播图的图片放在images文件夹中当然这里也可以不用专门放在一个文件夹中，只要自己能找到图片的位置就行，因为这里css样式涉及不多，就不单独放在一个文件夹中4、自己用着顺手的开发工具，我用的是HBuilderHT

Zqiqi_

9083人浏览 · 2021-06-02 16:57:02

Zqiqi_ · 2021-06-02 16:57:02 发布

记录一下轮播图制作（这里用的是原生js制作的）

前期准备工作

1、自己用的顺手的开发工具，我这里用的时HBuilder来写的
2、创建项目
3、在项目中创建images、css、js文件夹，把需要制作成轮播图的图片放在images文件夹中当然这里也可以不用专门放在一个文件夹中，只要自己能写到对应的位置就行
大概是这样

HTML页面

<body>
		<div class="box">
			<a href="javascript:;" class="arrow-l">&lt;</a>
			<a href="javascript:;" class="arrow-r">&gt;</a>
			<ul>
				<li>
					<img src="images/img1.jpg" >
				</li>
				<li>
					<img src="images/img2.jpg" >
				</li>
				<li>
					<img src="images/img3.jpg" >
				</li>
				<li>
					<img src="images/img4.jpg" >
				</li>
			</ul>
			<!-- 轮播图底部小圆圈 -->
			<ol class="circle">
				
			</ol>
		</div>
	</body>

css页面

样式可以不和我一样，根据自己的喜好自己写都是可以的

ul,
ol {
	margin: 0;
	padding: 0;
}

ul {
	position: absolute;
	/*这里ul的宽度要留出自己轮播图数量以外再加一张图的宽度，*/
	/*可以往大了写但是差不多就可以了，不要10000 100000这种*/
	width: 4000px;
	height: 400px;
}

ul li {
	float: left;
	width: 700px;
	height: 400px;
	list-style: none;
}

ol {
	position: absolute;
	bottom: 0;
	width: 100px;
	height: 15px;
	z-index: 1;
}

ol li {
	float: left;
	width: 10px;
	height: 10px;
	margin-right: 5px;
	border-radius: 50%;
	border: 1px solid #fff;
	cursor: pointer;
	list-style: none;
}

.box {
	position: relative;
	width: 700px;
	height: 400px;
	margin: 100px auto;
	overflow: hidden;
}

.arrow-l,
.arrow-r {
	display: block;
	position: absolute;
	z-index: 1;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: rgba(0, 0, 0, .3);
	color: #fff;
	text-decoration: none;
}

.arrow-l {
	left: 0;
	border-radius: 0 20px 20px 0;
	display: none;
}

.arrow-r {
	right: 0;
	border-radius: 20px 0 0 20px;
	display: none;
}

.box ul img {
	width: 100%;
	height: 100%;
}

.current {
	background-color: #fff;
}

动画函数animater.js

function animate(obj, target, callBack) {
	clearInterval(obj.timer);
	obj.timer=setInterval(function() {
		if(obj.offsetLeft == target) {
			clearInterval(obj.timer);
			//回调函数写到定时器结束里面
			if(callBack) {
				callBack();
			}
		}
		var step=(target - obj.offsetLeft) / 10;
		//判断是向上取整还是向下取整
		step=step > 0 ? Math.ceil(step) : Math.floor(step);
		obj.style.left=obj.offsetLeft+step+'px';
	}, 30);
}

轮播动画效果函数run.js

这里面大部分的代码我写了注释，看不懂的地方可以看一下注释

window.addEventListener('load', function() {
	var arrow_l = document.querySelector(".arrow-l");
	var arrow_r = document.querySelector(".arrow-r");
	var box = document.querySelector(".box");
	//得到轮播图盒子的宽
	var boxWidth=box.offsetWidth;
	//当鼠标经过轮播图时左右箭头显示，离开时箭头隐藏
	box.addEventListener("mouseenter", function() {
		arrow_l.style.display = "block";
		arrow_r.style.display = "block";
		clearInterval(timer);
		timer = null;
	})
	box.addEventListener("mouseleave", function() {
		arrow_l.style.display = "none";
		arrow_r.style.display = "none";
		timer = setInterval(function() {
			// 手动调用点击事件
			arrow_r.click();
		}, 3000)
	})
	// 动态生成小圆圈
	var ul = box.querySelector("ul");
	var ol = box.querySelector(".circle");
	for(var i = 0; i < ul.children.length; i++) {
		// 创建li
		var li = document.createElement("li");
		li.setAttribute("index", i);
		// 记录当前小圆圈索引号通过自定义属性
		ol.appendChild(li);
		li.addEventListener("click", function() {
			for(var i = 0; i < ol.children.length; i++) {
				ol.children[i].className = "";
			}
			this.className = "current";
			// 点击小圆圈移动图片
			// 得到当前点击的这个li的index的属性
			var index = this.getAttribute("index");
			// 点击哪个li就把index给num和circle
			num = index;
			circle = index;
			animate(ul, -index * boxWidth);
		})
	}
	ol.children[0].className = "current";
	// 复制ul的第一个li,来做第一章图片滑动效果
	var first = ul.children[0].cloneNode(true);
	ul.appendChild(first);
	var num = 0;
	var circle = 0;
	// 右箭头点击事件
	arrow_r.addEventListener("click", function() {
		// 如果走到了最后复制的一张图片,此时快速跳转left=0
		// ul.children.length-1
		if(num == ul.children.length-1) {
			ul.style.left = 0;
			num = 0;
		}
		num++;
		animate(ul, -num*boxWidth);
		circle++;
		if(circle == ol.children.length) {
			circle = 0;
		}
		circleChange();
	})
	arrow_l.addEventListener("click", function() {
		// 如果走到了最前面一张图片,此时快速跳转轮播图的最后一张
		if(num == 0) {
			num = 4;
			ul.style.left = -(ul.children.length-1) * boxWidth + 'px';
			
		}
		num--;
		animate(ul, -num*boxWidth);
		circle--;
		if(circle < 0) {
			circle = ol.children.length-1;
		}
		circleChange();
	})
	function circleChange() {
		for (var i= 0; i < ol.children.length; i++) {
			ol.children[i].className="";
		}
		ol.children[circle].className="current";
	}
	// 定时器，鼠标离开时自动播放
	var timer = setInterval(function() {
		arrow_r.click();
	}, 3000)
})

最后我们在最先写的html页面头部中引入我们写的css文件和js文件就可以了
引入文件
运行效果图

自动播放时

鼠标放在轮播图上时

点击按钮时