android京东首页轮播代码,web移动端-轮播
var bannerImg = document.querySelectorAll(".jd_banner ul li");
/*
1.自动滚动(定时器+过渡transition+位移transform:translateX);
2.点随之滚动起来,改变当前的class样式
3.添加滑动事件(touch)
(1)当滑动超过一定距离的时候 滚动到上一张或者下一张 (banner图片的1/3);
(2)当滑动不超过1/3banner宽度时,弹回去,吸附回去
*/
//1.先获取banner 可见宽度
var bannerBox = document.querySelector(".jd_banner");
//2.获取可见宽度
var w = bannerBox.offsetWidth;
//3.获取图片的ul,再获取点的ul下所有的li-->点
var ulImg = document.querySelector(".clearfix");
var dot = document.querySelectorAll("ul:nth-child(2) li");
// console.log(dot);
//4.添加过渡方法
var addTransition = function(){
ulImg.style.transition = "all 0.3s linear";//兼容写法
ulImg.style.webkitTransition = "all 0.3s linear";//兼容写法
// transition:all 1s linear(匀速) 1s;
}
//5.添加过渡方法
var addTranslateX = function(translateX){
ulImg.style.transform = "translateX("+translateX+"px)";
ulImg.style.webkitTransform = "translateX("+translateX+"px)";
}
//6.添加X轴方向的位移方法
//删除过度的方法
var removeTransition = function(){
// ulImg.style.webkitTransition="none";
ulImg.style.transition="none";
}
//7.定时器 自动滚动起来
var index = 1;//记录滚动的次数
var timer = setInterval(function(){
//让index++;盒子滚动
index++;
//调用过渡
addTransition();
//调用位移
var translateX
translateX = -(index*w);
addTranslateX(translateX);
},2000);
//8绑定一个过渡结束事件
itcast.transitionEnd(ulImg,function(){
if(index>=9){
index = 1;
removeTransition();
addTranslateX(-index*w);
}else if(index<=0){
index = 8;
removeTransition();
addTranslateX(-index*w);
}
setPoint();
});
//9.点随之移动
function setPoint(){
for(var i=0;i
dot[i].className="";
}
dot[index-1].className="now";
}
//10.图片滑动事件touch
var startX = 0,//当前你触摸的X轴坐标
moveX=0,//移动的时候的 X轴的实时坐标
distanceX = 0, //moveX-startX
isMove = false;//表示是否移动
//touchstart
ulImg.addEventListener("touchstart",function(e){
//获取startX的值
//清除定时器
clearInterval(timer);
startX = e.touches[0].clientX;
setPoint();
});
ulImg.addEventListener("touchmove",function(e){
isMove=true
//获取moveX的值
moveX = e.touches[0].clientX;
//获取distanceX的值
distanceX = moveX-startX;
//正值 右移(上一张)
//负值 左移(下一张)
//真正位移的距离 -index*w+distanceX
//删除过渡
removeTransition();
//调用位移方法
addTranslateX(-index*w+distanceX);
});
ulImg.addEventListener("touchend",function(e){
//判断distanceX>w/3
//取绝对值Math.abs();
if(isMove&&(Math.abs(distanceX)>w/3)){//大于w/3时,index已经改变,所以在绑定一个过渡结束事件里面添加了一个判断
if(distanceX>0){
//向右滑
index--;
addTransition();
addTranslateX(-index*w);
}else{
//向左滑
index++;
addTransition();
addTranslateX(-index*w);
}
}else{
//当滑动距离小于w/3的时候,自动定位回去,index值不变
addTransition();
addTranslateX(-index*w);
}
//重置我们的所有变量
startX = 0;
moveX=0;
distanceX = 0;
isMove = false;
timer = setInterval(function(){
index++;
addTransition();
//调用位移
var translateX
translateX = -(index*w);
addTranslateX(translateX);
setPoint();
},2000);
});
android京东首页轮播代码,web移动端-轮播相关推荐
- 移动端实现文字轮播_js实现移动端轮播图
本文实例为大家分享了js实现移动端轮播图的具体代码,供大家参考,具体内容如下 这是结构 Document 这是CSS /* 搜索部分 */ .jd_layout{ width: 100%; max-w ...
- android京东首页轮播代码,仿京东商品详情轮播图
好久没有更新啦,今天来搞一个京东的轮播:直接上效果 8月-16-2016 09-38-10.gif 8月-16-2016 09-37-17.gif 如果想真实体验可以去京东APP体验一下. 描述一下效 ...
- java图片特效轮播代码_JQuery实现图片轮播效果
[实例演示] 1 2 3 4 用JQuery操作DOM确实很方便,并且JQuery提供了非常人性化的API应付我们的各种需求,其中选择器在此示例-"JQuery实现图片轮播效果"上 ...
- 自动图片轮播php源码,js图片自动轮播代码分享(js图片轮播)
1.利用图片width显示位置来播放图片,技术:.offsetWidth .aBtn[i].index = i .setInterval() .oUl[0].style.left = .onclic ...
- 新增轮播图跳转web页面、轮播、推荐歌单数据存储( 简易音乐 七)
新增轮播图跳转web页面.轮播.推荐歌单数据存储( 简易音乐 七) 关于 效果图 第一步,添加引用 新增数据库实体类 修改fragment代码 新增WebActivity页面加载网页 关于 本篇主 ...
- Pygame入门-游戏代码结构及背景轮播、声音音效及图像动态效果
一.游戏代码结构 代码结构是代码的组织方式,也是游戏编程的思考框架.pygame官方文档中给出了以下建议,将游戏代码结构分为以下六个部分. 1导入游戏模块. 2资源处理类;定义一些类来处理最基本的资源 ...
- html的轮播点怎么设置,html轮播效果的实现
要实现如下图的效果 点击可以选择图片:不点击的时候自动轮播:并且点击完后再次自动轮播. 思路:如同在房子里透过窗子看路过的火车一样,窗子是不动的,但火车是陆续经过窗子的,所以透过窗子可以看到依次看完所 ...
- 学习响应式BootStrap来写融职教育网站,Bootsrtap第七天PC端轮播图
<!DOCTYPE html> <html lang="zh_CN"> <head><meta charset="UTF-8&q ...
- 学习响应式BootStrap来写融职教育网站,Bootsrtap第六天移动端轮播图
<!DOCTYPE html> <html lang="zh_CN"> <head><meta charset="UTF-8&q ...
最新文章
- 设计模式学习 之 单例模式
- select语句for update---转载
- linux shell参数传递、获取方式
- iMac建立到服务器的反向ssh
- 【SSH网上商城项目实战19】订单信息的级联入库以及页面的缓存问题
- C语言经典算法100例-031-判断星期几
- 数字孪生及其在航空航天中的应用
- 为什么整数在python中表示d_python中整数的缓存机制
- Evernote 全球开发者大赛最终入围作品介绍
- 『常识』罗胖的《罗辑思维》中推荐的书 — 未校正
- 嵌入式C编程中的设计模式之二——状态机模式
- 卡西欧函数计算机广告词,卡西欧函数计算器,终身学习如有神助!
- 在 Word 2013 中编写公式并标号
- 漫谈程序员(十三)健康程序猿系列之男人晚睡的7大危害
- mock和spy的不同点
- Python Tableau——数据分析招聘岗位的抓取与初步分析
- OpenCV-Python击中击不中HITMISS形态变换详解
- PyQt5适配高分屏的方法
- xp下IIS500错误解决方案
- 实验记录 | scATAC-seq数据的比对(一)
热门文章
- Linux上搭建verdaccio私服
- 深圳php和java,深圳java技术培训学习(Java和PHP区别)
- Centos 7或者说linux 怎么一直运行一个项目,自己退出终端也在运行
- webpack打包之clean-webpack-plugin插件 默认下载4.0.0版本的踩坑记录
- svn cvs git的区别
- mysql调优的一些方面
- RabbitMQ入门(三)-Publish/Subscribe(发布/订阅)
- 实践:使用FLANN.LSH进行检索
- win10笔记本永久删除文件文件怎样恢复
- java使用POI获取sheet、行数、列数