基于javascript实现移动端轮播图效果


Posted in Javascript onDecember 21, 2020

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

插件使用:

1.zepto.js
2.touch.js

实现效果

基于javascript实现移动端轮播图效果

html部分:

<!-- 结构 -->
 <!-- li*6>a[href=#]>img[src=./images/$.jpg] -->
 <div class="box">
  <ul>
   <!-- 为了无缝连接,我们在图片这里前后增加了2个图片 -->
   <li>
    <a href="#" ><img src="./images/6.jpg" alt=""></a>
   </li>
   <li>
    <a href="#" ><img src="./images/1.jpg" alt=""></a>
   </li>
   <li>
    <a href="#" ><img src="./images/2.jpg" alt=""></a>
   </li>
   <li>
    <a href="#" ><img src="./images/3.jpg" alt=""></a>
   </li>
   <li>
    <a href="#" ><img src="./images/4.jpg" alt=""></a>
   </li>
   <li>
    <a href="#" ><img src="./images/5.jpg" alt=""></a>
   </li>
   <li>
    <a href="#" ><img src="./images/6.jpg" alt=""></a>
   </li>
   <li>
    <a href="#" ><img src="./images/1.jpg" alt=""></a>
   </li>
  </ul>
</div>

css部分:

* {
   margin: 0;
   padding: 0;
  }
  
  ul {
   list-style: none;
  }
  
  .box {
   width: 100%;
   overflow: hidden;
  }
  
  ul {
   /* 把li变成8张之后,需要,把ul的宽度变宽 */
   width: 800%;
   /* transition: all 1s; */
  }
  
  li {
   float: left;
   width: 12.5%;
  }
  
  img {
   width: 100%;
  }

js部分:

//获取DOM
 var box = $(".box");
 var img = $("ul img");
 var ul = $("ul");
 var imgWidth = img.width();

 var index = 1;
 var right = index * imgWidth;
 ul.css("transform", `translateX(-${right}px)`);
 setTimeout(function() {
  ul.css("transition", "all 500ms");
 }, 100);

 //往左滑,坐标在增大
 box.on("swipeLeft", function() {
  index++;
  // if (index == img.length) {
  //  index = 0;
  // }
  var left = index * imgWidth;
  ul.css("transform", `translateX(-${left}px)`);
 });
 //往左滑,坐标在增大
 box.on("swipeRight", function() {
  index--;
  // if (index == -1) {
  //  index = img.length - 1;
  // }
  var right = index * imgWidth;
  ul.css("transform", `translateX(-${right}px)`);
 });

 //过渡结束之后时进行
 ul.on("transitionend", function() {
  //1.判读 index
  //往左面滑(滑倒倒数第一张的时候,其实显示的已经是用户想看的第一张)
  if (index == img.length - 1) {

   index = 1;
   //index修改完毕之后需要重新执行一遍
   var right = index * imgWidth;
   ul.css("transform", `translateX(-${right}px)`);

   //2.取消过渡效果
   ul.css("transition", "none");
   //3.已经判断完毕了,重新打开过渡效果
   //这里设置一个1毫秒的延迟,否则会一起进行
   setTimeout(function() {
    ul.css("transition", "all 500ms");
   }, 1);
  }

  //1.判读 index
  //往右面滑(滑倒index为0的时候,显示的是客户想看的第6张图)
  if (index == 0) {
   //2.取消过渡效果
   ul.css("transition", "none");
   index = img.length - 2;
   //index修改完毕之后需要重新执行一遍
   var left = index * imgWidth;
   ul.css("transform", `translateX(-${left}px)`);
   //延迟开启过渡效果
   setTimeout(function() {
    ul.css("transition", "all 500ms");
   }, 1)
  }
 })

代码目前就分享到这里,欢迎大家有问题积极评论。

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

Javascript 相关文章推荐
JavaScript 学习笔记(十一)
Jan 19 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
简述vue路由打开一个新的窗口的方法
Nov 29 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 Javascript
AJAX实现省市县三级联动效果
Oct 16 Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 Javascript
原生JS实现pc端轮播图效果
Dec 21 #Javascript
js实现移动端轮播图滑动切换
Dec 21 #Javascript
vue监听滚动事件的方法
Dec 21 #Vue.js
vue el-upload上传文件的示例代码
Dec 21 #Vue.js
微信小程序自定义支持图片的弹窗
Dec 21 #Javascript
Jquery+javascript实现支付网页数字键盘
Dec 21 #jQuery
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 #Javascript
You might like
php判断正常访问和外部访问的示例
2014/02/10 PHP
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
python万年历实现代码 含运行结果
2017/05/20 Python
python 系统调用的实例详解
2017/07/11 Python
Python测试人员需要掌握的知识
2018/02/08 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
Django中使用第三方登录的示例代码
2018/08/20 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
2014年教师节讲话稿5篇
2014/09/10 职场文书
项目合作协议书
2014/09/23 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
职工培训工作总结
2015/08/10 职场文书
员工给公司的建议书
2019/06/24 职场文书
Java数组与堆栈相关知识总结
2021/06/29 Java/Android
Java后台生成图片的完整步骤
2021/08/04 Java/Android
python中的3种定义类方法
2021/11/27 Python
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python