移动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/ ...
随机推荐
- BZOJ3991 寻宝游戏 LCA 虚树 SET
5.26 T1:寻宝游戏 Description 小B最近正在玩一个寻宝游戏,这个游戏的地图中有N个村庄和N-1条道路,并且任何两个村庄之间有且仅有一条路径可达.游戏开始时,玩家可以任意选择一个村庄, ...
- 【POJ3159】Candies（差分约束系统）
题意:有一些人, 给n个人派糖果,给出m组约束,每组约束包含A,B,c 三个数, 意思是A的糖果数比B少的个数不多于c,即B的糖果数 - A的糖果数<= c . 最后求n 比 1 最多多多少糖果 ...
- javamail中的 javax.mail.AuthenticationFailedException: failed to connect的解决
在163邮箱中开启POP3和SMTP服务,并设置客户端授权密码,用该密码登录.而不是用户的密码.
- sql sever 等待事件
http://blog.csdn.net/dba_huangzj/article/details/7607844
- Unity3D开发——LeRunning的人物角色信息的显示
///////////////////////2015/08/22/////////////// //////////////////////by xbw/////////////////// ...
- zoj 1880 - Tug of War
题目:有n个人分成两组,两组人数差不能超过1,找到两组的人重量之差的最小值. 分析:dp,二维01背包. 由于必须放在两个组中的一组,直接背包全部可到状态, 取出相差不超过 1的最接近 sum/2的值 ...
- MySQL计算字段
计算字段 数据库中存放的表是按列存放,可是有时客户机想获得的信息是若干列之间的组合,或者求和的值.这个组合或者求和的动作能够放在客户机应用程序来做.可是在数据库中实现更为高效. 这个新计算出来的结果就 ...
- Android studio一些设置项
------Appearance选项------------------------------------------------------------- Cylic scrolling in l ...
- click事件触发也有失灵的时候？
今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...
- 使iframe随内容（target到iframe的内容）改变而自适应高度，完美解决各种获取第一个demo高度后第二个高度不变情况
转自:http://caiceclb.iteye.com/blog/281102 很高兴,终于使用jquery实现了点击外部链接,更改iframe内容时,iframe的高度自适应问题. 失败的测试就不 ...