移动web——轮播图
1、我们将5张图片又前后各增加一张，第一张前增加的是原本的第五张，第五张后增加的是原本的第一张，增加的原因无非是手指滑动的时候有轮播效果，这不像以前的轮播图，点击图标就能立刻将ul跳转到指定位置，手机滑动不行
2、当我们手指从第一张向右边方向滑动时，会出现第五张图片，在这个滑动效果结束之后我们跳转到倒数第二张，其实也是第五张；当我们手指从倒数第二张图片向左滑动时，会出现第一张，等这个滑动效果结束之后我们跳转到第二张图片，其实也是第一张图；这里我们必须借助transitionEnd事件
3、手指的滑动的动漫效果的transition事件最好小于定时器图片中的transition时间
4、保险起见，在手指滑动时，需要校验index值，以触发滑动事件的target来进行判断
5、为了在手指滑动的时候立刻响应，小图标在滑动的时候会根据变化了的index值立刻变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
} .clearfix::before, .clearfix::after {
content: '';
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
} html, body {
width: 100%;
height: 100%;
background-color: #c3c3c3;
} .banner {
width: 100%;
position: relative;
overflow: hidden;
} .banner ul:nth-child(1) {
list-style: none;
width: 700%;
transform: translateX(-14.28571%);
} .banner ul:nth-child(1) li {
float: left;
width: 14.28571%;
height: 200px;
} .banner ul:nth-child(1) li a {
width: 100%;
height: 100%;
text-decoration: none;
} .banner ul:nth-child(1) li div {
width: 100%;
height: 100%;
text-align: center;
line-height: 200px;
font-size: 40px;
color: black;
} .banner ul:nth-child(2) {
list-style: none;
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -55px;
} .banner ul:nth-child(2) li {
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid #fff;
margin-left: 10px;
} .yellow {
background-color: yellow;
} .pink {
background-color: pink;
} .current {
background-color: #fff;
} .blue {
background-color: blue;
}
</style>
</head>
<body>
<div class="banner">
<ul class="clearfix">
<li>
<a href="#">
<div class="pink" biao=5>5-</div>
</a>
</li>
<li>
<a href="#">
<div class="yellow" biao=1>1</div>
</a>
</li>
<li>
<a href="#">
<div class="pink" biao=2>2</div>
</a>
</li>
<li>
<a href="#">
<div class="yellow" biao=3>3</div>
</a>
</li>
<li>
<a href="#">
<div class="blue" biao=4>4</div>
</a>
</li>
<li>
<a href="#">
<div class="pink" biao=5>5</div>
</a>
</li>
<li>
<a href="#">
<div class="yellow" biao=1>1-</div>
</a>
</li>
</ul>
<ul>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var banner = document.querySelector('.banner');
var moveWidth = banner.offsetWidth;
var ulLunBo = banner.querySelector('ul:nth-child(1)');
var circleArr = banner.querySelectorAll('ul:nth-child(2) li');
var moveDistance = 0;
var index = 0;
function animation() {
ulLunBo.style.transition = 'all .6s';
index++;
moveDistance = -moveWidth * index;
ulLunBo.style.transform = 'translateX(' + moveDistance + 'px)';
console.log(index + '==' + moveDistance); //小圆点根据index发生变化 for (var i = 0; i < circleArr.length; i++) {
circleArr[i].className = '';
}
if (index > 5) {
circleArr[0].className = 'current';
return;
}
if (index < 1) {
circleArr[5].className = 'current';
return;
}
circleArr[index - 1].className = 'current';
} var timer = setInterval(animation, 1000);
ulLunBo.addEventListener('webkitTransitionEnd', function () {
if (index > 5) {
index = 1;
} else if (index < 1) {
index = 5;
}
circleArr[index - 1].className = 'current';
ulLunBo.style.transition = '';
moveDistance = -moveWidth * index;
ulLunBo.style.transform = 'translateX(' + moveDistance + 'px)';
}); var startX = 0;
var moveX = 0;
var distance = 0;
var freeMove = 0;
ulLunBo.addEventListener('touchstart', function (e) {
clearInterval(timer);
distance = moveDistance;
ulLunBo.style.transition = '';
startX = e.touches[0].clientX;
})
ulLunBo.addEventListener('touchmove', function (e) {
moveX = e.touches[0].clientX - startX;
freeMove = distance + moveX;
ulLunBo.style.transform = 'translateX(' + freeMove + 'px)';
})
//吸附效果是重点
//1、当自由移动距离freeMove的绝对值与清除定时器前的moveDistance的绝对值进行比较的cha值进行判断
//2、cha值小于moveWidth的一半在touchend的事件中需要归位到moveDistance的位置
//3、cha值大于moveWidth的一半在touchend的事件中需要根据cha值的正负情况向左或者向右前进1个moveWidth
//4、根据第三步，我们还需要将index的值进行改变，因为我们最终移动了ulLunBo的位置
var triggerValue = null;
ulLunBo.addEventListener('touchend', function (e) {
ulLunBo.style.transition = 'all .3s';
triggerValue = e.target.getAttribute('biao');
var cha = Math.abs(freeMove) - Math.abs(moveDistance);
if (cha >= moveWidth / 2) {
//左边移动距离大于宽度的一半
moveDistance -= moveWidth;
index = parseInt(triggerValue) + 1;
} else if (cha <= (-moveWidth / 2)) {
//右边移动距离大于宽度的一半
moveDistance += moveWidth;
index = parseInt(triggerValue) - 1;
} else {
//向左向右移动距离小于宽度的一半
moveDistance = moveDistance;
}
if (index > 5) {
index = 1;
} else if (index < 1) {
index = 5;
}
for (var i = 0; i < circleArr.length; i++) {
circleArr[i].className = '';
}
circleArr[index - 1].className = 'current';
ulLunBo.style.transform = 'translateX(' + moveDistance + 'px)';
timer = setInterval(animation, 1000);
}
);
</script>
</body>
</html>
移动web——轮播图的更多相关文章
- 移动Web轮播图IOS卡顿的问题
晚饭前,被测试吐槽说,banner轮播手动左右滑的时候会卡顿.我一看不科学啊,大水果手机怎么会卡顿.我一看测试手中拿的是iPod,我觉得大概是这小玩意性能不强悍,后来又拿来5S,依然会卡顿,有趣的是, ...
- 移动端web轮播图插件swiper，功能很强大
使用方法示例: <div class="swiper-container"> <div class="swiper-wrapper"> ...
- JS+css3焦点轮播图PC端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- web常见效果之轮播图
轮播图的展示效果是显而易见: HTML代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
- Web前端原生JavaScript浅谈轮播图
1.一直来说轮播图都是困扰刚进业内小白的一大难点,因为我们不仅需要自己作出一个比较完美的运动框架(虽然网上一抓一大把,但是哪有比自己做出来实现的有成就感,不是吗?^_^),还必须需要非常关键性的把握住 ...
- 第124天：移动web端-Bootstrap轮播图插件使用
Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...
- 移动web——bootstrap响应式轮播图
基本介绍 1.bootstrap有轮播图的模板,我们只需要改动下就行. 2.这里我们将介绍桌面版本和移动版本最后是综合版本 桌面版本 1.这里的图片设置是有窍门的,不再去添加img标签,而是作为a标签 ...
- Web前端JS实现轮播图原理
实现轮播图有很多方式,但是html的结构都是一样的.本文使用了Jquery框架,Dom操作更加方便灵活 html部分: <div class="banner"> < ...
- [Web] 通用轮播图代码示例
首先是准备好的几张图片, 它们的路径是: "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/ ...
随机推荐
- [24点计算器][C++版本]无聊拿去玩
特性:数字数量.目标答案不限,当然数据大了会很慢... 基本可以去除所有本质相同的表达式...至少能等出结果的数据规模可以.. 安卓:http://yun.baidu.com/s/1slCGILn 程 ...
- Linux下汇编语言学习笔记71 ---
这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...
- nyoj_528_找球号（三）_201404152050
找球号(三) 时间限制:2000 ms | 内存限制:3000 KB 难度:2 描述 xiaod现在正在某个球场负责网球的管理工作.为了方便管理,他把每个球都编了号,且每个编号的球的总个数都是 ...
- Sublime Text 3配置支持Markdown编辑
继上一篇http://www.cnblogs.com/EasonJim/p/7119304.html文章安装好之后,对Markdown支持需要做如下处理: 1.按下[Ctrl]+[Shift]+[P] ...
- Codeforces Round #245 (Div. 1)——Guess the Tree
题目链接 题意: n个节点,给定每一个节点的子树(包含自己)的节点个数.每一个节点假设有子节点必定大于等于2.求这种数是否存在 n (1 ≤ n ≤ 24). 分析: 用类似DP的思路,从已知開始.这 ...
- 转：SQL 索引最左前缀原理
表结构和索引列 假设数据库中表是这样的: 我们只考虑一张表employees.titles: 索引是(emp_no,title,from_date) SHOW INDEX FROM employee ...
- 一起talk C栗子吧（第一百二十三回：C语言实例--显示变量和函数的地址）
各位看官们,大家好,上一回中咱们说的是多线程的样例.这一回咱们说的样例是:显示变量和函数的地址. 闲话休提,言归正转.让我们一起talk C栗子吧! 在编敲代码时,有时候须要获取程序中变量和函数的地址 ...
- 将一个对象相同的属性(不区分大小写)赋值给一个新对象 DataTable的一个简单的扩展
将一个对象相同的属性(不区分大小写)赋值给一个新对象 1 public static T Mapper<S, T>(S source) 2 { 3 T t = Activator.Cr ...
- 玩转iOS开发 - 视图控制器生命周期
视图控制器生命周期
- hdu 1728 逃离迷宫 bfs记步数
题链:http://acm.hdu.edu.cn/showproblem.php?pid=1728 逃离迷宫 Time Limit: 1000/1000 MS (Java/Others) Mem ...