javascript实现移动端轮播图


Posted in Javascript onDecember 09, 2020

本文实例为大家分享了js实现移动端轮播图的具体代码,供大家参考,具体内容如下

<!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="yidong.css" >
</head>
<body>
 <!-- 页头 -->
 <button class="open">打开app</button>
 <div style="display: flex; justify-content: center; background-color: rgb(28, 151, 141);width: 100%; height: 0.8rem;"><div style="display:inline-block; font-size: 0.4rem;"><p class="sun" style="font-size: 0.55rem;">?</p> 
</div><input type="text" style="width: 70%;background-color: rgb(190, 217, 219); font-size: 0.4rem;color: rgb(81, 82, 81);"> <input type="submit" value="?" style="width: 10%;font-size: 0.5rem;"></div>
 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 <!-- 轮播图部分 -->
 <div class="lunbo">
  <ul class="lul"> 
  
  <li>
  <a href="">
   <img src="img/1.png" alt="">
  </a>
  </li>
  <li >
  <a href="">
   <img src="img/2.png" alt="">
  </a>
  </li>
  <li >
  <a href="">
   <img src="img/3.png" alt="">
  </a>
  </li>  
  </ul>
 </div>
</body>
</html>

js:

<script src="rem.js"></script>
<script>
 //设置动态的css样式
 
 var lunbo =document.querySelector('.lunbo') 
 var lul=document.querySelector('.lul')
 var fimg =document.querySelectorAll('li')[0];
 var limg =document.querySelectorAll('li')[2];
// cloneNode复制一个元素
// appendChild() 方法可向节点的子节点列表的末尾添加新的子节点,再最后一张图片后面添加第一张图片
 lul.appendChild(fimg.cloneNode(true))
//在第一张图片前面添加最后一张图片 
lul.insertBefore(limg.cloneNode(true),lul.firstChild)
// 获取lul下面全部的li
 var lis= lul.querySelectorAll('li')
 
// 获取li元素的数量
var licount = lis.length;
// 获取轮播图总共的宽度
var lwidth = lunbo.offsetWidth;
// 设置图片盒子的宽度
lul.style.width=licount*lwidth+'px';
//设置每一个li元素的样式 给他们定义宽度 他的宽度就等于我们页面的宽度也就是lunbo的宽度
for(i=0;i<lis.length;i++){
 lis[i].style.width=lwidth+'px'
}
//设置偏移距离
lul.style.left=-lwidth+'px'

// 设置自动轮播
// 设置索引(设置索引为1,因为图片已经偏移了)
var index=1
// 设置定时器先去封装他,因为后面要开启定时器,调用这个函数就行了
var time;//要在外面定义time不然后面清除定时器接收不到函数
//当手指滑动轮播图过快的时候后面的轮播图就不会显示,因为滑动过快时过度没有完成就不会触发webkitTransitionEnd(监听当元素执行完过度效果)
//所以设置一个变量用来控制,(过度效果未完成不能滑动图片)
var con=true
 var ltime=function(){
 time=setInterval(function(){
index++
// 设置偏移 每次偏移都是以最初的点为参照点点的,所以如果每次都便宜一个width的话图片就不动
lul.style.left=(-index*lwidth)+'px'

// 添加过度效果,在最后一张跳到第一张时要清除过度效果所以要加上如果在清除过度后面添加else{ lul.style.transition='all 1s'}的话因为有个定时器所以不能流畅执行
lul.style.transition='all 1s'

setTimeout(function(){
 // 判断是否到最后一张
// 当显示为最后一幢图片时进行操作,最后一张图片的索引值为licount-1
if(index==licount-1){
 index=1;
// 偏移到最开始的位置
lul.style.left=(-index*lwidth)+'px'
//当显示最后一张的时候会移回去,所以要清除过度效果
lul.style.transition='none'}
//如果直接清除过度效果的话最后一张就直接跳过去了,所以让他延迟一会在进行判断(跳转),这就是为什么在最后一张后面要添加第一张图片了 



},1000)

},2000)
 }
ltime();
//设置触摸事件
// 定义手指的坐标 分为x和y
var sx,sy,mx,my,dis;
lul.addEventListener('touchstart',function(q){
 clearInterval(time);
 sx=q.targetTouches[0].clientX;
})

lul.addEventListener('touchmove',function(q){
 if(con==true){
  mx=q.targetTouches[0].clientX;
 dis=mx-sx;
 lul.style.left=-index*lwidth+dis+'px'
 // 为了使过度效果流畅 去除lul的过渡效果
 lul.style.transition='none'
 }
 
})
lul.addEventListener('touchend',function(){
 con=false;
 // 判断是否切换图片
 if(Math.abs(dis)>100){//切换图片 如果手指触摸滑动的距离超过100进行图片切换
 if(dis>0){//如果偏移值为正数则向下一张偏移(向右滑动)
 index--
 }
 else{//如果偏移值为负数则向下一张偏移(向左滑动)
 index++
 }
 //设置轮播图的最终偏移,添加过度
 lul.style.left=-index*lwidth+'px';
 lul.style.transition='all 0.5s'
 }
 else if(Math.abs(dis)>0 ){//确定用户做出拖拽事件,点一下的话不需要做出相关操作
 //设置轮播图回弹,添加过度效果
 lul.style.left=-index*lwidth+'px';
 lul.style.transition='all 0.5s'
 }
//执行完触摸事件就可以从新开启定时器了
sx=0;
mx=0;
dis=0;
ltime()

})
//解决轮播图划到第一张或者最后一张时没有图片
//添加 webkitTransitionEnd 事件,webkitTransitionEnd事件是监听当元素执行完过度效果

 lul.addEventListener('webkitTransitionEnd',function(){
con=true

if(index==licount-1){//当滑动到最后一个图片时展示的是倒数第二张图片让图片展示的为第一张
 index=1;//index时从0开始的
 lul.style.left=-index*lwidth+'px';
 lul.style.transition='none'
 
}
else if(index==0){//当展示的时最后一张图片时,就是第一个位置的图片向前滑动时让他展示最后一张图片
 index=licount-2;
 lul.style.left=-index*lwidth+'px';
 lul.style.transition='none'
 
 
}

 })
 
</script>

效果图:

javascript实现移动端轮播图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS中style属性
Oct 11 Javascript
jscript之List Excel Color Values
Jun 13 Javascript
javascript getElementsByName()的用法说明
Jul 31 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
详解Vue之事件处理
Jul 10 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 Javascript
MutationObserver在页面水印实现起到的作用详解
Jul 07 Javascript
JavaScript实现弹出窗口效果
Dec 09 #Javascript
五句话帮你轻松搞定js原型链
Dec 09 #Javascript
JS常用跨域方法实现原理解析
Dec 09 #Javascript
video.js添加自定义组件的方法
Dec 09 #Javascript
手把手教你如何编译打包video.js
Dec 09 #Javascript
ES6 十大特性简介
Dec 09 #Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 #Javascript
You might like
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
Python中IPYTHON入门实例
2015/05/11 Python
python实现简易云音乐播放器
2018/01/04 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
Python控制Firefox方法总结
2019/06/03 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
python代码能做成软件吗
2020/07/24 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
商务专员岗位职责
2013/11/23 职场文书
学生操行评语大全
2014/04/24 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
八年级数学教学反思
2016/02/17 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技