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 相关文章推荐
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
input的focus方法使用
Mar 13 Javascript
node.js require() 源码解读
Dec 13 Javascript
详解Node.js模块间共享数据库连接的方法
May 24 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
在vue中实现简单页面逆传值的方法
Nov 27 Javascript
精读《Vue3.0 Function API》
May 20 Javascript
antd table按表格里的日期去排序操作
Nov 17 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 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计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
python实现socket端口重定向示例
2014/02/10 Python
python写的一个squid访问日志分析的小程序
2014/09/17 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
python实现维吉尼亚加密法
2019/03/20 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
J2EE包括哪些技术
2016/11/25 面试题
后进生转化工作制度
2014/01/17 职场文书
简短大学毕业感言
2014/01/18 职场文书
安全生产实施方案
2014/02/23 职场文书
个人租房协议书
2014/04/09 职场文书
校园活动策划方案
2014/06/13 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
公司2014年度工作总结
2014/12/10 职场文书
Vue.Draggable实现交换位置
2022/04/07 Vue.js