移动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/ ...
随机推荐
- scrapy的User-Agent中间件、代理IP中间件、cookies设置、多个爬虫自定义settings设置
在scrapy的反爬中,常用的几个配置,简单总结了下: User-Agent中间件: from fake_useragent import UserAgent class RandomUserAgen ...
- nginx,tornado,websocket,supervisord配置成型
因为要上生产环境,所以配置还是专业一些比较好. nginx.conf upstream websocket_host { server 127.0.0.1:9527; } location /ws_l ...
- Screenshot: available via screen
在使用selenium+PhantomJS进行爬虫时候报错 selenium.common.exceptions.TimeoutException: Message: Screenshot: avai ...
- 在Electron中通过ffi模块实现JavaScript调用C++动态库
目前在网上能搜到的JS调C++动态库的实现有两种,一种是通过开发Node.js addon模块的方式实现调用,这种对于我们已有的代码实现比较复杂,需要大量的开发,因此不适用:另一种是通过FFI模块,F ...
- [javase学习笔记]-7.7 thiskeyword的细节与应用
这一节我们接着上一节来继续学习thiskeyword. 我们之前在7.5节中的构造函数应注意的细节中提到过一个细节就是构造函数能够调用一般函数,但一般函数不能直接调用构造函数.可是我们没有深究构造函数 ...
- android微信开放平台，申请移动应用的应用签名怎样获取
在微信开放平台,申请移动应用的时候: https://open.weixin.qq.com/cgi-bin/appcreate? t=manage/createMobile&type=app& ...
- 11082 完全二叉树的种类 O(n) 卡特兰数
11082 完全二叉树的种类 时间限制:800MS 内存限制:1000K提交次数:0 通过次数:0 题型: 编程题 语言: G++;GCC;VC Description 构造n个(2<=n ...
- SharePoint 2013 JavaScript 对象推断用户权限
场 景 最近有个场景,推断当前用户对项目有没有编辑权限,使用JavaScript完毕.弄了好久才弄出来.分享一下,有须要的自行扩展吧,详细例如以下: 代 码 function getPermissi ...
- LeetCode 83. Remove Duplicates from Sorted List （从有序链表中去除重复项）
Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...
- ALSA声卡驱动中的DAPM详解之七：dapm事件机制（dapm event）
前面的六篇文章,我们已经讨论了dapm关于动态电源管理的有关知识,包括widget的创建和初始化,widget之间的连接以及widget的上下电顺序等等.本章我们准备讨论dapm框架中的另一个机制:事 ...