首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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实现移动端轮播图

- Author -

我要学web

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
FileUpload上传图片(图片不变形)
Aug 05 Javascript
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
Bootstrap零基础入门教程(三)
Jul 18 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
JS实现评价的星星功能
Aug 20 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 Javascript
JS实现简单九宫格抽奖
Jun 28 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
TextInputLayout(1) REST(1) cmd(1) exists(2) 远程桌面(2) Switch(1) Spring JPA(1) Spring Bean(1) openEuler(1) EditText(1)
You might like
一段防盗连的PHP代码
2006/12/06 PHP
php处理json时中文问题的解决方法
2011/04/12 PHP
PHP实现下载功能的代码
2012/09/29 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
2016/06/13 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
Python里disconnect UDP套接字的方法
2015/04/23 Python
深入理解python函数递归和生成器
2016/06/06 Python
Python进程间通信Queue实例解析
2018/01/25 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
Python configparser模块操作代码实例
2020/06/08 Python
Python timeit模块原理及使用方法
2020/10/10 Python
日语专业毕业生求职信
2013/12/04 职场文书
《我不是最弱小的》教学反思
2014/02/23 职场文书
大课间活动实施方案
2014/03/06 职场文书
房屋买卖委托公证书
2014/04/08 职场文书
培训科主任岗位职责
2014/08/08 职场文书
实习协议书
2015/01/27 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
golang中的空接口使用详解
2021/03/30 Python
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS
python缺失值填充方法示例代码
2022/12/24 Python