function slide() {

var bannerImgs = document.querySelector(".banner_imgs");

var Indexs = document.querySelectorAll(".banner_index li");

var imgLis = document.querySelectorAll(".banner_imgs li");

//屏幕宽度

var screenWidth = document.body.offsetWidth;

var index = 1;

//默认显示的应该是第二张图片

bannerImgs.style.transform = "translateX(" + screenWidth index -1 + "px)";

//添加过渡效果

function setTransition() {

bannerImgs.style.webkitTransition = "all .2s";

bannerImgs.style.transition = "all .2s";

}

//清除过渡效果

function clearTransition() {

bannerImgs.style.webkitTransition = "none";

bannerImgs.style.transition = "none";

}

//设置移动距离

function setTranslateX(distance) {

bannerImgs.style.webkitTransform = "translateX(" + distance + "px)";

bannerImgs.style.transform = "translateX(" + distance + "px)";

}

//控制小圆点

function setPoint() {

for (var i = 0; i < Indexs.length; i++) {

Indexs[i].className = "";

}

Indexs[index - 1].className = "current";

}

//设置定时器

var timer = setInterval(function() {

index++;

setTransition();

setTranslateX(screenWidth index -1);

},1000);

//添加过渡动画结束事件

bannerImgs.addEventListener("transitionend",function() {

if (index > 8) {

index = 1;

} else if (index < 1) {

index = 8;

}

clearTransition();

setTranslateX(screenWidth index -1);

setPoint();

})

//添加touch事件

var startX = 0;

var moveX = 0;

var isMove = false;

bannerImgs.addEventListener("touchstart",function(event) {

isMove = false;

clearInterval(timer);

startX = event.touches[0].clientX;

})

bannerImgs.addEventListener("touchmove",function(event) {

isMove = true;

moveX = event.touches[0].clientX - startX;

setTranslateX(moveX + index screenWidth -1);

})

bannerImgs.addEventListener("touchend",function(event) {

if(isMove && Math.abs(moveX) > screenWidth/3){

if (moveX < 0) {

index++;

} else if (moveX > 0) {

index--;

}

}

setTransition();

setTranslateX(index screenWidth -1);

timer = setInterval(function() {

index++;

setTransition();

setTranslateX(screenWidth index -1);

},1000);

})

}

html手机移动端轮播器,JS仿京东移动端手指拨动切换轮播图效果相关推荐

  1. 使用hammer.js实现移动端手指滑动切换轮播图教程

    今天面试前端开发时,要求在移动端实现手指滑动切换轮播图 这里我用到 bootsrap 的轮播图组件 + hammer.js 库 文章参考: Hammer.js - 李林峰的园子 - 博客园 (cnbl ...

  2. 二、原生JS实现优酷会员首页动态切换轮播图

    内容概览 优酷会员首页 一.效果图(完整效果参见源码) 二.源码 (一)HTML文档(index.html) (二)CSS文档(index.css) (三)JS文档(index.js) 优酷会员首页 ...

  3. HTML+CSS+JS仿京东购物车页面动态效果

    目录 1 用到的知识 1.1 js选择器 1.2 循环语句 1.3 文档修改语句 1.4 模块移除属性 2 HTML代码 3 CSS代码 3.1 预处理css 3.2 jd购物车页面的css 4 jd ...

  4. 自己编写的仿京东移动端的省市联动选择JQuery插件

    概述 什么是插件,插件就是即插即用叫插件,很少的配置,很少的代码就可以用都项目里,之所以做这个插件,是因为做了一个省市区的联动,其他项目如果要用怎么办,难道在ctrl+c,ctrl+v?那样做太low ...

  5. b站pink老师JavaScript的PC端网页特效 案例代码——仿京东放大镜效果

    目录 原理讲解: 代码段: 1. detail.html部分(重点在标红区) 2. detail.js部分(全部都是重点) 3. detail.css部分(重点在标红区) 4. base.css部分( ...

  6. JQ或JS仿京东淘宝属性规格SKU样式

    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

  7. 图片轮播器(swift)

    如何实现一个无限循环,无缝衔接的图片轮播器 自己实现一次以后就不用使用轮播器的框架了 能用代码解决的问题就不在这里瞎BB了  O(∩_∩)O 首先先在Carousel文件件夹创建以下几个文件 Caro ...

  8. 关于element-ui中轮播图手动切换轮播图片

    文章目录 前言 一.关于element-ui中轮播图手动切换轮播图片 二.解决方案 1.查看element-ui中Carousel 走马灯组件的方法 2.解决方法 结尾 前言 在开发过程中发现项目中轮 ...

  9. php 可以做pc客户端吗,vue.js能做pc端吗

    vue.js能做pc端,因为Vue是一套构建用户界面的渐进式框架,不管是用在PC端还是用在移动端,只要提供对应的API及数据相应就可以:但是PC端单页面对于搜索引擎可能不太友好,无法让搜索引擎把整个网 ...

最新文章

  1. 关于vmstat,top,ps aux查看的cpu占用率不一致的问题
  2. 带实证明,imshow是能显示数据归一化到0到1的图像的!
  3. linux 手动安装 oracle(转)
  4. Spark入门(十二)之最值
  5. python 测试mysql数据库_Python MySQL 数据库之测试索引
  6. matlab图像基础处理小记
  7. ParNew垃圾收集器
  8. Eslint Standard Style语法规则
  9. phpexcel 打开时 excel无法识别此文件格式
  10. 微信第三方平台公众号授权
  11. HashSet源码阅读
  12. python——字典攻击
  13. 大疆网上测评题库_网上测评有什么技巧或者题库推荐?
  14. html5音乐播放器在线生成,一款极简的HTML5音乐播放器-skPlayer
  15. USB加密狗复制工具
  16. 哈夫曼编码(Huffman Coding)多图详细解析
  17. c语言工具栏运行不见了,电脑下面的任务栏不见了怎么办 几种方法介绍
  18. 循环神经网络的从零开始实现
  19. 启用静态NVI的NAT的配置步骤及示例
  20. 简述与机器学习相关的十大常用Python库,极简化算法编程

热门文章

  1. oracle位图索引和普通索引区别,Oracle学习之位图索引
  2. 【android开发】桌面小挂件( APP Widgets )
  3. 【锋会现场】15岁少年极客黑入小米路由器
  4. ubuntu 安装jq工具
  5. 『C/C++养成计划』C++中的双冒号::名解析(Scope Resolution Operator)
  6. html页面右侧有缝隙,HTML解决div里面img的缝隙问题
  7. 服务器不显示ipv4信息,【已经解决】ip addr不显示ipv4
  8. Google Pack
  9. FineUI秘密花园(四) — 页面级别的配置
  10. Codeforces Round #568 (Div. 2)C2. Exam in BerSU (hard version)