原生js实现移动端轮播图

最新推荐文章于 2024-06-10 21:52:46 发布
最新推荐文章于 2024-06-10 21:52:46 发布
阅读量590 收藏 2
点赞数
文章标签： js css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45378970/article/details/108842838
版权

大家一起复制以下代码查看效果吧!

htm代码

		<div id="box">
			<ul id="one">
				<li><img src="./img/3.jpg" alt=""></li>
				<li><img src="./img/1.jpg" alt=""></li>
				<li><img src="./img/2.jpg" alt=""></li>
				<li><img src="./img/3.jpg" alt=""></li>
				<li><img src="./img/1.jpg" alt=""></li>
			</ul>
			<!-- 小圆点 -->
			<ol id="two">
				<li class="current"></li>
				<li></li>
				<li></li>
			</ol>
		</div>

css代码

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			#box{
				width: 500px;
				height: 200px;
				overflow: hidden;
				margin: 0 auto;
				position: relative;
			}
			#one{
				width: 500px;
				height: 200px;
				overflow: hidden;
				position: absolute;
				left: 0;
				top: 0;
			}
			#one li{
				float: left;
			}
			#one img{
				width: 100%;
			}
			/* 小圆点 */
			#two{
				position: absolute;
				right: 10px;
				bottom: 10px;
			}
			#two li{
				float: left;
				width: 12px;
				height: 12px;
				background-color: red;
				margin-right: 5px;
			}
			.current{
				background-color: orange;
			}
		</style>

js实现代码

<script type="text/javascript">
			function mFun$(id){
				return document.getElementById(id);
			}
			// if ('addEventListener' in document) {
			// 	document.addEventListener('DOMContentLoaded', function() {
			// 		FastClick.attach(document.body);
			// 	}, false);
			// }
			// mFun$('box').addEventListener('click',function(){
			// 	console.log(11);
			// })
			//获取相框宽度
			var imgWidth=mFun$('box').offsetWidth;
			//获取ul
			var ul=mFun$('one');
			//获取图片数
			var imgs=ul.querySelectorAll('img');
			//给ul设置width
			ul.style.width=imgWidth*imgs.length+'px';
			//利用定时器自动轮播图片
			var index=0;
			var timer=setInterval(function(){
				index++;
				var translateX=-index*imgWidth;
				//css3过渡实现
				ul.style.transition='all .3s'
				ul.style.transform='translateX('+translateX+'px)'
			},2000)
			//无缝滚动（等着过渡完成以后再去判断） transitionend过渡完成事件
			ul.addEventListener('transitionend',function(){
				//无缝滚动
				if(index>=3){
					index=0;
					//去除过渡效果
					ul.style.transition='none';
					var translateX=-index*imgWidth;
					ul.style.transform='translateX('+translateX+'px)';
				}else if(index<0){
					index=2;
					ul.style.transition='none';
					var translateX=-index*imgWidth;
					ul.style.transform='translateX('+translateX+'px)';
				}
				//获取ol下的li
				var lis=mFun$('two').querySelectorAll('li');
				mFun$('two').querySelector('.current').classList.remove('current');
				lis[index].classList.add('current');
			});
			//手指滑动轮播图
			//获取手指的初始坐标
			var startX=0;
			var moveX=0;
			var flag=false; //节流阀（严谨操作）
			ul.addEventListener('touchstart',function(e){
				var e=e||window.event;
				startX=e.targetTouches[0].pageX;
			})
			//touchmove
			ul.addEventListener('touchmove',function(e){
				//计算移动距离
				moveX=e.targetTouches[0].pageX-startX;
				//移动盒子：盒子原来的位置+手指移动的距离
				var translateX=-index*imgWidth+moveX;
				//手指拖动的时候，不需要动画效果所以要取消过渡效果
				ul.style.transform='none';
				ul.style.transform='translateX('+translateX+'px)';
				flag=true;
				e.preventDefault(); //阻止滚动屏幕的行为
			});
			//手指离开，根据移动距离去判断是回弹还是播放上一张下一张
			ul.addEventListener('touchend',function(e){
				if(flag){
					if(Math.abs(moveX)>50){
						//如果是右滑就是播放上一张
						if(moveX>0){
							index--;
						}else{
							index++;
						}
						var translateX=-index*imgWidth;
						ul.style.transition='all .3s';
						ul.style.transform='translateX('+translateX+'px)';
					}else{
						//如果移动距离小于50px实现回弹
						var translateX=-index*imgWidth;
						ul.style.transition='all .3s';
						ul.style.transform='translateX('+translateX+'px)';
					}
					//手指离开的时候请重新开启定时器
					clearInterval(timer);
					var timer=setInterval(function(){
						index++;
						var translateX=-index*imgWidth;
						//css3过渡实现
						ul.style.transition='all .3s'
						ul.style.transform='translateX('+translateX+'px)'
					},2000)
				}
				
			});
		</script>

完整代码复制这里

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="user-scalable-no"/>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			#box{
				width: 500px;
				height: 200px;
				overflow: hidden;
				margin: 0 auto;
				position: relative;
			}
			#one{
				width: 500px;
				height: 200px;
				overflow: hidden;
				position: absolute;
				left: 0;
				top: 0;
			}
			#one li{
				float: left;
			}
			#one img{
				width: 100%;
			}
			/* 小圆点 */
			#two{
				position: absolute;
				right: 10px;
				bottom: 10px;
			}
			#two li{
				float: left;
				width: 12px;
				height: 12px;
				background-color: red;
				margin-right: 5px;
			}
			.current{
				background-color: orange;
			}
		</style>
		<!-- <script src="fastclick.js"></script> -->
	</head>
	<body>
		<div id="box">
			<ul id="one">
				<li><img src="./img/3.jpg" alt=""></li>
				<li><img src="./img/1.jpg" alt=""></li>
				<li><img src="./img/2.jpg" alt=""></li>
				<li><img src="./img/3.jpg" alt=""></li>
				<li><img src="./img/1.jpg" alt=""></li>
			</ul>
			<!-- 小圆点 -->
			<ol id="two">
				<li class="current"></li>
				<li></li>
				<li></li>
			</ol>
		</div>
		<script type="text/javascript">
			function mFun$(id){
				return document.getElementById(id);
			}
			// if ('addEventListener' in document) {
			// 	document.addEventListener('DOMContentLoaded', function() {
			// 		FastClick.attach(document.body);
			// 	}, false);
			// }
			// mFun$('box').addEventListener('click',function(){
			// 	console.log(11);
			// })
			//获取相框宽度
			var imgWidth=mFun$('box').offsetWidth;
			//获取ul
			var ul=mFun$('one');
			//获取图片数
			var imgs=ul.querySelectorAll('img');
			//给ul设置width
			ul.style.width=imgWidth*imgs.length+'px';
			//利用定时器自动轮播图片
			var index=0;
			var timer=setInterval(function(){
				index++;
				var translateX=-index*imgWidth;
				//css3过渡实现
				ul.style.transition='all .3s'
				ul.style.transform='translateX('+translateX+'px)'
			},2000)
			//无缝滚动（等着过渡完成以后再去判断） transitionend过渡完成事件
			ul.addEventListener('transitionend',function(){
				//无缝滚动
				if(index>=3){
					index=0;
					//去除过渡效果
					ul.style.transition='none';
					var translateX=-index*imgWidth;
					ul.style.transform='translateX('+translateX+'px)';
				}else if(index<0){
					index=2;
					ul.style.transition='none';
					var translateX=-index*imgWidth;
					ul.style.transform='translateX('+translateX+'px)';
				}
				//获取ol下的li
				var lis=mFun$('two').querySelectorAll('li');
				mFun$('two').querySelector('.current').classList.remove('current');
				lis[index].classList.add('current');
			});
			//手指滑动轮播图
			//获取手指的初始坐标
			var startX=0;
			var moveX=0;
			var flag=false; //节流阀（严谨操作）
			ul.addEventListener('touchstart',function(e){
				var e=e||window.event;
				startX=e.targetTouches[0].pageX;
			})
			//touchmove
			ul.addEventListener('touchmove',function(e){
				//计算移动距离
				moveX=e.targetTouches[0].pageX-startX;
				//移动盒子：盒子原来的位置+手指移动的距离
				var translateX=-index*imgWidth+moveX;
				//手指拖动的时候，不需要动画效果所以要取消过渡效果
				ul.style.transform='none';
				ul.style.transform='translateX('+translateX+'px)';
				flag=true;
				e.preventDefault(); //阻止滚动屏幕的行为
			});
			//手指离开，根据移动距离去判断是回弹还是播放上一张下一张
			ul.addEventListener('touchend',function(e){
				if(flag){
					if(Math.abs(moveX)>50){
						//如果是右滑就是播放上一张
						if(moveX>0){
							index--;
						}else{
							index++;
						}
						var translateX=-index*imgWidth;
						ul.style.transition='all .3s';
						ul.style.transform='translateX('+translateX+'px)';
					}else{
						//如果移动距离小于50px实现回弹
						var translateX=-index*imgWidth;
						ul.style.transition='all .3s';
						ul.style.transform='translateX('+translateX+'px)';
					}
					//手指离开的时候请重新开启定时器
					clearInterval(timer);
					var timer=setInterval(function(){
						index++;
						var translateX=-index*imgWidth;
						//css3过渡实现
						ul.style.transition='all .3s'
						ul.style.transform='translateX('+translateX+'px)'
					},2000)
				}
				
			});
		</script>
	</body>
</html>
是小王啊i
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript 轮播图（移动端）
m0_57835615的博客
06-02 291
功能如下： 1.自动循环播放，小圈随图片切换颜色 2.点击左右按钮，切换图片 3.点击小圆圈可切换至对应的图片 完整代码
移动端轮播图（原生JS写法）
weixin_47424113的博客
02-02 3134
移动端轮播图（原生JS写法） 文章目录移动端轮播图（原生JS写法）一、实现功能：二、实现步骤三、页面布局四、焦点图模块样式五、JS逻辑代码 一、实现功能： 可以自动播放图片 手指可以拖动播放轮播图 二、实现步骤 自动播放功能： ① 开启定时器 ② 移动端移动可以使用CSS3的translate移动。注意， 使用translate不需要添加就可以移动 ③ 想要图片优雅的移动，就需要添加过渡效果 自动播放功能-无缝滚动： ① 注意，我们判断条件是要等到图片滚动完毕再去判断，就是过渡完成后判断 ② 此时需
JS实现移动端的轮播图滑动事件
最新发布
ggq53219的博客
06-10 388
以上代码是一个基础示例，用于展示如何使用触摸事件来创建一个简单的滑动效果。对于更复杂的需求，你可能需要考虑使用现成的轮播图库，如Swiper、Slick等。在移动端实现轮播图滑动事件，我们通常使用。
js-移动端轮播图
qq_61706112的博客
02-17 948
一、基本结构 1. html <div class="banner"> <ul class="lunbo clearfix"> <li><a href="#"><img src="uploads/banner3.jpg"></a></li> <li><a href="#"><img src="uploads/banner1.jpg"></
原生JS实现移动端的轮播效果
dengweihuan4949的博客
03-19 130
首先 我们想实现的效果是在手指按下拖动的时候图片能够跟随移动（无动画效果）然后松开手指后判断图片移动的位置 和某一个值进行比较 在这里我们默认定为盒子的1/3宽度 当x轴的移动位置大于1/3的时候图片切换到下一张或者上一张(此时需要有动画效果) 当图片移动位置小于1/3的时候 抬起手指的图片回到原位( 此时也有动画效果) 具体代码如下 布局就是简单的长列形式 让最...
js 移动端轮播图效果
黄大仙
08-11 287
效果图 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../base.css"> <link rel="stylesheet" href="移动端轮播图.css"> &lt
原生js实现移动端Touch轮播图的方法步骤
10-17
本文将详细介绍如何使用原生JavaScript实现一个基于Touch的移动端轮播图。 首先，我们需要理解轮播图的基本结构。通常，HTML部分会包含一个`<ul>`元素来承载轮播图片，每个图片对应一个`<li>`元素。同时，为了指示...
原生js实现移动端触摸轮播的示例代码
10-18
本篇内容将介绍如何利用原生JavaScript编写代码，实现一个简易的移动端触摸轮播图功能。以下是详细知识点的介绍： ### 移动端触摸轮播图的原理： 在PC端实现轮播图较为简单，通常通过监听点击事件即可完成图片的...
js原生实现移动端手指滑动轮播图效果的示例
10-18
在本文中，我们将探讨使用纯JavaScript（js原生）实现移动端的手指滑动轮播图效果。轮播图是一种常见的网页元素，用于在有限的空间内展示一系列的图片或者内容。本文所演示的方法适用于移动端设备，如智能手机和平板...
支持移动端原生js轮播图
10-20
以上知识点涵盖了使用原生JavaScript开发移动端轮播图的主要方面，这包括了布局设计、交互逻辑编写、以及对轮播图行为的控制。掌握这些知识点，对于开发移动端网页时实现一个功能强大、用户体验良好的轮播图组件是至...
js实现移动端轮播图
weixin_50736511的博客
12-07 362
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="yido
js实现移动端轮播图效果
10-19
主要为大家详细介绍了js实现移动端轮播图效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
手机端轮播图（焦点图）和hammer.js教程
01-18
手机端轮播图（焦点图）和hammer.js教程http://blog.csdn.net/libin_1/article/details/50534625
手机移动端轮播图切换js插件
12-18
超好用的 手机移动端轮播图切换js插件，支持 多图轮播，无缝切换
一个用于原生JS的移动端的可触摸滑动的轮播控件
08-13
一个用于原生JS的移动端的可触摸滑动的轮播控件
WebAPI第五天学习总结—— 移动端常见特效（轮播图）
weixin_52819925的博客
08-18 264
移动端常见特效 案例: 移动轮播图 需求：移动端轮播图功能和基本PC端一致 可以自动播放图片 手指可以拖动播放轮播图 案例分析： 自动播放功能 开启定时器 移动端移动，可以使用translate 移动 想要图片优雅的移动，请添加过渡效果 思路： 自动播放功能-无缝滚动 注意，我们判断条件是要等到图片滚动完毕再去判断，就是过渡完成后判断 此时需要添加检测过渡完成事件 transitionend 判断条件：如果索引号等于 3 说明走到最后一张图片，此时 索引号要复原为 0 此时图片，去掉过渡效果，
Js移动端轮播图
weixin_46513544的博客
04-24 234
移动端轮播图与PC端基本一致 自动播放图片 但可以1、可以自动播放图片 2、开启定时器 3、移动端移动，可以用translate移动 无缝滚动 4、自动无缝播放 5、等到过渡完成之后再去判断 6、添加检测过渡完成事件 transtionend 7、判断条件：如果索引号等于3，走到最后这一张，此时索引号就要复原为0 8、去掉过渡，重新计算index=0重新开始 9、如果索引号小于0，说明反方向走，让...
告别组件之教你使用原生js和css写移动端轮播图
dke1141的博客
09-09 224
在工作中由于项目需要要写一个轮播图，本想使用组件直接调用实现快速开发，但是一想到自己经常使用组件但是让自己手写的话确实一点都不会。 一个不会手写组件的前端程序员不是一个好程序员！于是打算自己手写一个。 老规矩，首先看一下最终效果，这个最终可以实现定时自动播放，触摸滑动，手动修改下面横条效果等功能。 项目中使用到的HTML代码如下 <div class="banner">...
原生JavaScript实现焦点轮播图技巧解析
"该资源是一篇关于使用原生JavaScript实现...这篇论文提供了一种实用的、基于原生JavaScript的焦点轮播图实现方法，对于网页开发者和设计者来说，是一个值得参考的技术方案，有助于他们优化网页设计，提升用户体验。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值