原生js实现轮播图

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

mytheart

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

阅读量211

点赞数

分类专栏： JavaScript 文章标签： html5 javascript

本文链接：https://blog.csdn.net/weixin_42755677/article/details/120446417

版权

JavaScript 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.0/vconsole.min.js"></script>
    <script>
        // init vConsole
        var vConsole = new VConsole();
    </script>
		<style>
			* {
				box-sizing: border-box;
			}
			body{
				margin: 0;
			}
			#banner{
				position: relative;
				width: 100vw;
				overflow: hidden;
				border: 1px solid red;
			}
			.wrap{
				width: 300vw;
				display: flex;
			}
			.wrap a{
				width: 100vw;
			}
			.wrap a img{
				width: 100%;
				vertical-align: middle;
			}

			.circle{
				position: absolute;
				bottom: 3vw;
				width: 100vw;
				display: flex;
				justify-content: center;
			}
			.circle span{
				width: 4vw;
				height: 4vw;
				background: #ddd;
				border-radius: 50%;
				margin: 0 1.5vw;
			}
			.circle span.active{
				background: green;
			}
		</style>
		<script src="js/transform.js"></script>
	</head>
	<body>
		<section id="banner">
			<div class="wrap">
				<a href="#"><img src="images/banner_01.jpg" alt=""></a>
				<a href="#"><img src="images/banner_02.jpg" alt=""></a>
				<a href="#"><img src="images/banner_03.jpg" alt=""></a>
			</div>
			<div class="circle">
				<span class="active"></span><span></span><span></span>
			</div>
		</section>
		<script>
			var banner=document.querySelector('#banner'),
				wrap=document.querySelector('.wrap'),
				spans=document.querySelectorAll('.circle span'),
				imgWidth=banner.offsetWidth;	//一张图片的宽度
			
			let startPointX=0,	//按下时手指的坐标
				disPointX=0,	//手指坐标的差
				startEleX=0,	//按下时元素的位置
				cn=0,			//当前图片走的索引数
				ln=0;			//上一个图片走的索引
			
			Transform(wrap);

			//无缝滚动
			wrap.innerHTML+=wrap.innerHTML;	//复制了一份
			wrap.style.width=wrap.children.length*imgWidth+'px';

			banner.addEventListener('touchstart', ev=>{
				console.log('touchstart', ev)
				startPointX=ev.changedTouches[0].pageX;

				//按下的是第0张图，要做的事情：让wrap走到第2份的第0张，左边就有内容
				if(cn==0){
					cn=wrap.children.length/2;
				}

				//按下的是最后一张图，要做的事情：让wrap走到第0份的最后一张图
				if(cn==wrap.children.length-1){
					cn=wrap.children.length/2-1;
				}

				wrap.style.transition='';	//不去掉的放在拖动的时候会很慢
				wrap.translateX=-imgWidth*cn;	//当改变了cn的值后也需要修正一下wrap的位置
				startEleX=wrap.translateX;	//当wrap的位置改变后，需要去更新一下初始值（元素的位置）

				ev.preventDefault();
			});
			banner.addEventListener('touchmove',ev=>{
				disPointX=ev.changedTouches[0].pageX-startPointX;
				
				wrap.translateX=startEleX+disPointX;
			});

			//自动走
			banner.addEventListener('touchend',ev=>{
				//回弹的效果
				let backWidth=imgWidth/8;	//加弹的距离，超过这个距离才能运动到下一张，小于这个距离就需要回弹

				if(Math.abs(disPointX)>backWidth){	//这个条件满足了说明现拖动的距离已经超过回弹的距离了，可以运动到下一张了
					//判断现在是往右边拖还是往左边拖
					if(disPointX<0){	//往左边拖
						cn++;
					}

					if(disPointX>0){	//往右边拖
						cn--;
					}
				}

				wrap.style.transition='0.3s';
				wrap.translateX=-imgWidth*cn;


				//修改小圆点的class
				/* 
					现在图片的索引：0，1，2，3，4，5 => 0,1,2,0,1,2
					span标签的索引：0，1，2
				 */


				spans[ln].className='';	//先去掉上一个次圆点身上的class
				spans[cn%(wrap.children.length/2)].className='active';	//先去掉上一个次圆点身上的class
				ln=cn%(wrap.children.length/2);	//再最后的时候需要去更新一下上一个的索引，更新为这次。相对于下次来说，它的上一次是不是就是当前次
			});
		</script>
	</body>
</html>

mytheart

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <title></title> <script src="htt
复制链接

扫一扫