用原生js写轮播图（并实现手动及自动切换图片）

最新推荐文章于 2024-06-17 15:29:34 发布

余月初贰

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量665

点赞数 5

文章标签：前端 html 前端开发

mkbk

本文链接：https://blog.csdn.net/m0_68633696/article/details/125640799

版权

显示效果在页面底部

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
			}
			h1{
				text-align: center;
			}
			.banner{
				width: 600px;
				height: 350px;
				margin: auto;
				border: 5px solid #aaffff;
				border-radius: 10px;
				position: relative;
				overflow: hidden;
			}
			.imgList img{
				width: 600px;
				height: 350px;
				border-radius: 5px;
				
			}
			.imgList{
				position: absolute;
			}
			.imgList li{
				float: left;
				margin-right: 20px;
				list-style: none;
			}
			.circle{
				position: absolute;
				bottom: 15px;
				left: 50%;
				transform: translateX(-50%);
			}
			.circle a{
				width: 15px;
				height: 15px;
				background: #ECECEC;
				display: block;
				border-radius: 50%;
				opacity: .8;
				float: left;
				margin-left: 10px;
				cursor: pointer;
			}
			.circle a.hover{
				background: black;
				opacity: .7;
			}
		</style>
	</head>
	<body>
		<h1>轮播图（原生js实现手动及自动切换）</h1>
		<div class="banner">
			
			<ul class="imgList">
				<li><img src="banner/1.webp" ></li>
				<li><img src="banner/2.webp" ></li>
				<li><img src="banner/3.webp" ></li>
				<li><img src="banner/4.webp" ></li>
			</ul>
			<div class="circle">
				
			</div>
		</div>
		<!-- 实现点击小圆点，图片滑动，小圆点样式改变 -->
		<script type="text/javascript">
			//确定ul的宽度，创建动态的小圆点
			var imgList = document.querySelector('.imgList');
			var circle = document.querySelector('.circle');
			var circleA = circle.children;
			var imgListli = imgList.children;
			//thisIndex默认索引值是0
			var thisIndex = 0;
			var flag = true;
			//window.onload延迟加载函数
			// 再全局设置flag为true 让使用动画都可执行
			window.onload = function(){
				//给ul标签设置宽度
				imgList.style.width = imgList.children.length*620+'px';
				//下面动态创建a标签
				for(var i = 0;i < imgList.children.length;i++){
					var aNode = document.createElement('a');
					//我们在这里创建index属性来记录索引值
					aNode.setAttribute('index',i);
					circle.appendChild(aNode);
				}
				// 动画1
				// 给小圆点加点击事件
				circle.addEventListener('click',function(e){
					// 这里给a标签点击事件有个小bug
					// 解决小bug的方法
					if(e.target.nodeName !='A'){
						return false;
					}
					if(flag){
						flag = false;
						// e.target指向的是a标签
						console.log(e.target);
						//获得索引值
						thisIndex = e.target.getAttribute('index');
						//图片移动的规则 0索引值->0 1 >1*620 2 >2*620
						// 这里的图片移动 我们可以用封装好的缓动动画来实现
						slow(imgList,-thisIndex*620,function(){
							flag = true;
						});
						circlechange();
					}
				})
				//动画2
				//自动切换动画
				function autoChange(){
					//设置定时器
					setInterval(function(){
						if(flag){
							flag = false;
							if(thisIndex>=imgListli.length){
								thisIndex = 0;
							}
							slow(imgList,-thisIndex*620,function(){
								flag = true;
							});
							circlechange();
							// 利用缓动函数 让图片动起来
							// 注意 这里先让图片移动,再thisIndex自增
							thisIndex++;
						}
					},1000)
				}
				autoChange();
				function circlechange(){
					for(var i = 0; i < circleA.length;i++){
						circleA[i].className = '';
					}
					circleA[thisIndex].className = 'hover';
				}
				// 缓动动画
				function slow(obj,target,getflag){
					obj.myInter = setInterval(function(){
						var offsetLeft = obj.offsetLeft;
						var num = (target-offsetLeft)/10;
						//Math.ceil向上取整 Math.floor向下取整
						num>0?num = Math.ceil(num):num=Math.floor(num);
						//注意随着定时器的运行 num数值会由大到小发生变化
						//下面是固定写法
						//因为offsetLeft的值在变大
						if(offsetLeft==target){
							clearInterval(obj.myInter);//清除定时器
							//在动画执行完了 执行将flag改为true的函数
							//下面是固定写法
							getflag && getflag();
						}else{
							obj.style.left = offsetLeft+num+'px';
						}
					},10)
				}
			}
		</script>
	</body>
</html>

浏览器显示效果