html手机移动端轮播器,JS仿京东移动端手指拨动切换轮播图效果
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仿京东移动端手指拨动切换轮播图效果相关推荐
- 使用hammer.js实现移动端手指滑动切换轮播图教程
今天面试前端开发时,要求在移动端实现手指滑动切换轮播图 这里我用到 bootsrap 的轮播图组件 + hammer.js 库 文章参考: Hammer.js - 李林峰的园子 - 博客园 (cnbl ...
- 二、原生JS实现优酷会员首页动态切换轮播图
内容概览 优酷会员首页 一.效果图(完整效果参见源码) 二.源码 (一)HTML文档(index.html) (二)CSS文档(index.css) (三)JS文档(index.js) 优酷会员首页 ...
- 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 ...
- 自己编写的仿京东移动端的省市联动选择JQuery插件
概述 什么是插件,插件就是即插即用叫插件,很少的配置,很少的代码就可以用都项目里,之所以做这个插件,是因为做了一个省市区的联动,其他项目如果要用怎么办,难道在ctrl+c,ctrl+v?那样做太low ...
- b站pink老师JavaScript的PC端网页特效 案例代码——仿京东放大镜效果
目录 原理讲解: 代码段: 1. detail.html部分(重点在标红区) 2. detail.js部分(全部都是重点) 3. detail.css部分(重点在标红区) 4. base.css部分( ...
- JQ或JS仿京东淘宝属性规格SKU样式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 图片轮播器(swift)
如何实现一个无限循环,无缝衔接的图片轮播器 自己实现一次以后就不用使用轮播器的框架了 能用代码解决的问题就不在这里瞎BB了 O(∩_∩)O 首先先在Carousel文件件夹创建以下几个文件 Caro ...
- 关于element-ui中轮播图手动切换轮播图片
文章目录 前言 一.关于element-ui中轮播图手动切换轮播图片 二.解决方案 1.查看element-ui中Carousel 走马灯组件的方法 2.解决方法 结尾 前言 在开发过程中发现项目中轮 ...
- php 可以做pc客户端吗,vue.js能做pc端吗
vue.js能做pc端,因为Vue是一套构建用户界面的渐进式框架,不管是用在PC端还是用在移动端,只要提供对应的API及数据相应就可以:但是PC端单页面对于搜索引擎可能不太友好,无法让搜索引擎把整个网 ...
最新文章
- 关于vmstat,top,ps aux查看的cpu占用率不一致的问题
- 带实证明,imshow是能显示数据归一化到0到1的图像的!
- linux 手动安装 oracle(转)
- Spark入门(十二)之最值
- python 测试mysql数据库_Python MySQL 数据库之测试索引
- matlab图像基础处理小记
- ParNew垃圾收集器
- Eslint Standard Style语法规则
- phpexcel 打开时 excel无法识别此文件格式
- 微信第三方平台公众号授权
- HashSet源码阅读
- python——字典攻击
- 大疆网上测评题库_网上测评有什么技巧或者题库推荐?
- html5音乐播放器在线生成,一款极简的HTML5音乐播放器-skPlayer
- USB加密狗复制工具
- 哈夫曼编码(Huffman Coding)多图详细解析
- c语言工具栏运行不见了,电脑下面的任务栏不见了怎么办 几种方法介绍
- 循环神经网络的从零开始实现
- 启用静态NVI的NAT的配置步骤及示例
- 简述与机器学习相关的十大常用Python库,极简化算法编程
热门文章
- oracle位图索引和普通索引区别,Oracle学习之位图索引
- 【android开发】桌面小挂件( APP Widgets )
- 【锋会现场】15岁少年极客黑入小米路由器
- ubuntu 安装jq工具
- 『C/C++养成计划』C++中的双冒号::名解析(Scope Resolution Operator)
- html页面右侧有缝隙,HTML解决div里面img的缝隙问题
- 服务器不显示ipv4信息,【已经解决】ip addr不显示ipv4
- Google Pack
- FineUI秘密花园(四) — 页面级别的配置
- Codeforces Round #568 (Div. 2)C2. Exam in BerSU (hard version)