移动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/ ...
随机推荐
- jQuery对象是怎么创建的
一.jQuery源码 在jQuery中,$是jQuery的别名,执行“$()”就是执行“jQuery()”,执行“$()”返回的是一个jQuery对象,在源码中,它是这样定义的: ... var jQ ...
- 采药 2005年NOIP全国联赛普及组&疯狂的采药
时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 辰辰是个天资聪颖的孩子,他的梦想是成为世界上最伟大的医师.为此,他想拜附近最有威望 ...
- BIV+CSS网页的标准化布局
DIV用于搭建网站结构(框架),CSS用于创建网站表现(样式/美化) DIV+CSS模式设计网站的优势: 1.表现和内容分离. 2代码简洁,提高网页浏览速度. 3.易于维护,改版. 4.提高搜索引擎对 ...
- DELPHI7加载UNICODE编码格式的TXT显示为乱码的解决方法
DELPHI7的STRING默认是ANSI编码,加载UNICODE编码格式的TXT显示为乱码,解决方法如下: procedure TForm1.Button1Click(Sender: TObject ...
- 1.3－动态路由协议EIGRP②
LAB3:Wildcard Mask in EIGRP (通过反掩码,控制运行EIGRP的接口的范围 作用:控制有哪些接口在运行EIGRP) ~~~~~~~~~~~~~~~~~ ...
- ORACLE database console无法登陆
登陆EM时给我报这个错 Code d'erreur : ssl_error_weak_server_cert_key 仅仅须要关闭EM的SSL就好了 [oracle@ace-PROD1 ~]$ emc ...
- Oracle 简单的列转行
需求是,统计每一个部门不同工种的薪水总和. SQL> select deptno,ename,job,sal from emp; DEPTNO ENAME JOB ...
- LeetCode 463. Island Perimeter （岛的周长）
You are given a map in form of a two-dimensional integer grid where 1 represents land and 0 represen ...
- MapReduce的矩阵相乘
一.单个mapreduce的实现 转自:http://blog.sina.com.cn/s/blog_62186b460101ai1x.html 王斌_ICTIR老师的<大数据:互联网大规模数据 ...
- ios12--简易购物车
Assets.xcassets图片是拖到右边里面去的. // // ViewController.m // 03-综合练习 // #import "ViewController.h" ...