基于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 相关文章推荐
Jquery从头学起第四讲 jquery入门教程
Aug 01 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
ajax读取数据后使用jqchart显示图表的方法
Jun 10 Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 Javascript
Layui table field初始化加载时进行隐藏的方法
Sep 19 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 Javascript
如何基于javascript实现贪吃蛇游戏
Feb 09 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 Javascript
用vite搭建vue3应用的实现方法
Feb 22 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网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
一个简单的php路由类
2016/05/29 PHP
php之可变函数的实例详解
2017/09/13 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
javascript 表单验证常见正则
2009/09/28 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
超市中秋节促销方案
2014/03/21 职场文书
校园演讲稿汇总
2014/05/21 职场文书
师范生求职自荐信
2014/06/14 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
求职信如何撰写?
2019/05/22 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS