原生 js 实现轮播兼容 IE

最新推荐文章于 2021-09-22 01:43:48 发布

淡然若水.

最新推荐文章于 2021-09-22 01:43:48 发布

阅读量252

点赞数

文章标签： javascript css html 前端 css3

本文链接：https://blog.csdn.net/qq_40463625/article/details/104858999

版权

实现思路：
设置一个外层div，用来显示轮播图，隐藏溢出部分设置相对定位;
设置一个banner容器，并排放置img图片，使图片向左浮动设置绝对定位;
利用banner容器的left，加上定时器，实现轮播。
定时器定时将banner容器的left减小，实现banner容器向左移，从而图片向左移。
移到一定程度停止，然后继续移，移到最后一张就重置所有参数，重新开始移。。。
第一张图片跟最后一张banner图必须一致，最后一张banner图用来过渡到第一张banner图。

同样的思路，用css3过渡实现可以使轮播过程更平滑，没有卡顿感：
在banner容器上设置css:
	transition: all 0.5s linear;
再用定时使banner容器的left减少。
没错的话，这种方法轮播到最后一个图片的时候，应该是在0.5s内，所有的图片从左到右，很快地移回第一张。。。
感觉有点不爽，，所以还是选择了第一种方法。。。没有反方向移动，一直向左移。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>原生js轮播</title>
		<script type="text/javascript" src="play.js"></script>
		<style type="text/css">
			.mainImg {
				width: 100%;
				height: 599px;
				overflow: hidden;
				position: relative;
			}
			
			.mainImgWrapper {
				width: 100%;
				height: 100%;
				position: absolute;
			}
			
			.mainImgWrapper img {
				float: left;
			}
			
			.circle {
				width: 100%;
				position: absolute;
				bottom: 40px;
				text-align: center;
			}
			
			.circle span {
				width: 20px;
				height: 20px;
				border-radius: 50%;
				display: inline-block;
				margin: 0 10px;
				border: solid 1px gainsboro;
			}
			
			.circle span:hover {
				background: white !important;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {

				// 获取轮播图大小
				var clientWidth = document.getElementById("mainImg").offsetWidth;

				// 动态设置主图片容器的大小(可动态增减图片) 
				var mainImgWrapper = document.getElementById("mainImgWrapper");

				// 获取图片数量
				var imgNum = mainImgWrapper.children.length;
				mainImgWrapper.style.width = imgNum * clientWidth + "px";

				for(var i = 0; i < imgNum; i++) {
					mainImgWrapper.children[i].style.width = clientWidth + 'px'
					//		mainImgWrapper.children[i].style.height =  clientWidth + 'px'
				}

				// 获取轮播图下小圆点的父元素 
				var circle = document.getElementById("circle");

				// 最后一张图片不生成小圆点
				// 根据图片数量动态添加对应的小圆点  设置图片大小
				for(var i = 0; i < imgNum - 1; i++) {
					circle.appendChild(document.createElement("span"));
				}

				// 设置其宽度，实现居中
				//circle.style.width = ( 16 * circle.children.length)/100 + "rem";

				// 动态设置主图片的大小  
				var mimgs = document.getElementsByClassName("mimg");

				for(var i = 0; i < mimgs.length; i++) {
					mimgs[i].style.width = clientWidth + "px";
				}

				// 开始轮播定时器
				var timerStart;

				// 延时轮播定时器
				var delayTimer;

				// 点击图片定时器
				var circleBtn;

				// 偏移量计数器
				var counter = 0;

				// 静止次数计数器
				var timer = 1;

				function start() {
					// 轮播 主图片定时向左偏移 
					timerStart = setInterval(function() {
						counter += 10;
						mainImgWrapper.style.left = -counter + "px";

						// 偏移量达到一定程度，停止偏移,并矫正图片位置。
						if(counter >= clientWidth * timer) {

							clearInterval(timerStart);

							mainImgWrapper.style.left = -(clientWidth) * timer + "px";
							setRollNavigation();
							// 静止次数加一 
							timer += 1;

							// 如果轮播过了所有图片，则重新设置偏移量
							if(timer == mainImgWrapper.children.length) {
								mainImgWrapper.style.left = 0 + "px";
								counter = 10;
								timer = 0;
							}

							// 停止一秒再开始
							delayTimer = setTimeout(function() {
								start();
							}, 1000);
						}
					}, 10);
				}

				// 设置轮播图下小圆点的功能
				function setRollNavigation() {
					for(var i = 0; i < circle.children.length; i++) {
						// 其他颜色统一 		
						circle.children[i].style.background = "#4A7087";
					};

					// 设置当前小圆点颜色
					if(timer < circle.children.length) {
						circle.children[timer].style.background = "#C69255";
					} else {
						//如果超出数组索引界限，说明图片播到最后一张，直接把第一张图对应的小圆点 点亮
						circle.children[0].style.background = "#C69255";
					};

					// 初始化小圆点样式
					if(counter == 0) {
						circle.children[0].style.background = "#C69255";
						circle.children[1].style.background = "#4A7087";
					}
				};

				function circleBtn() {
					// 设置按钮点击事件
					for(var i = 0; i < circle.children.length; i++) {

						circle.children[i].index = i;

						circle.children[i].onclick = function() {
							// 先停止定时器
							clearInterval(timerStart);
							clearInterval(delayTimer);
							clearInterval(circleBtn);

							// 更新索引
							timer = this.index;
							// 导航按钮跟随点亮
							setRollNavigation();
							// 更新偏移量
							counter = clientWidth * timer;
							mainImgWrapper.style.left = -counter + "px";
							// 点击按钮将静止两秒后开启轮播
							circleBtn = setTimeout(function() {
								start();
							}, 2000);
						};
					};
				};

				setRollNavigation();
				// 先静止一段时间才开始轮播				
				setTimeout(function() {
					circleBtn();
					start();
				}, 2000);
			}
		</script>
	</head>

	<body>
		<!--设置一个外层div，用来显示轮播图，隐藏溢出部分positin: relative;-->
		<div class="mainImg" id="mainImg">
			<!--设置一个banner容器，并排放置img图片，使图片向左浮动positin:absolute;-->
			<div class="mainImgWrapper" id="mainImgWrapper">
				<img src="http://www.ykqkdg.com/img/qingke1.jpg" alt="mainImg.jpg" />
				<img src="http://www.ykqkdg.com/img/qingke2.jpg" alt="mainImg.jpg" />
				<img src="http://www.ykqkdg.com/img/qingke1.jpg" alt="mainImg.jpg" />
			</div>
			<!--绝对定位的小圆点，分别代表每一个图片-->
			<div class="circle" id="circle">
			</div>
		</div>
	</body>

</html>

淡然若水.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生 js 实现轮播兼容 IE

实现思路：设置一个外层div，用来显示轮播图，隐藏溢出部分设置相对定位;设置一个banner容器，并排放置img图片，使图片向左浮动设置绝对定位;利用banner容器的left，加上定时器，实现轮播。定时器定时将banner容器的left减小，实现banner容器向左移，从而图片向左移。移到一定程度停止，然后继续移，移到最后一张就重置所有参数，重新开始移。。。第一张图片跟最后一张b...
复制链接

扫一扫