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 相关文章推荐
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
jQuery的slideToggle方法实例
May 07 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 Javascript
vue路由的配置和页面切换详解
Sep 09 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 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循环获取GET和POST值的代码
2008/04/09 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
详解PHP归并排序的实现
2016/10/18 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
简单学习vue指令directive
2016/11/03 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
domReady的实现案例
2016/11/23 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
小程序开发之模态框组件封装
2020/04/23 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
详解Python编程中基本的数学计算使用
2016/02/04 Python
Python字符串处理实例详解
2017/05/18 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
python编写分类决策树的代码
2017/12/21 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
解决python flask中config配置管理的问题
2019/07/26 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
canvas实现手机的手势解锁的步骤详细
2020/03/16 HTML / CSS
Cotton On美国网站:澳洲时装连锁品牌
2016/10/25 全球购物
《鞋匠的儿子》教学反思
2014/03/02 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
2015年中个人总结范文
2015/03/10 职场文书
教师教育心得体会
2016/01/19 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS