基于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 相关文章推荐
setTimeout的延时为0时多个浏览器的区别
May 23 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
JavaScript运行时库属性一览表
Mar 14 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 Javascript
在vue中实现echarts随窗体变化
Jul 27 Javascript
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
原生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加密解密类实例代码
2016/07/20 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
EL表达式截取字符串的函数说明
2017/09/22 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
vue+iview动态渲染表格详解
2019/03/19 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
Python 字符串操作方法大全
2014/03/11 Python
python中偏函数partial用法实例分析
2015/07/08 Python
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
python 用下标截取字符串的实例
2018/12/25 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
python opencv进行图像拼接
2020/03/27 Python
简述 Python 的类和对象
2020/08/21 Python
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
精选奢华:THE LIST
2019/09/05 全球购物
机械电子工程毕业生自荐信
2013/11/23 职场文书
洗发水广告词
2014/03/13 职场文书
小英雄雨来观后感
2015/06/09 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
MySQL存储过程及语法详解
2022/08/05 MySQL