仿京东移动端手指拨动切换轮播图效果
来源:互联网 发布:搭建个人云软件 编辑:程序博客网 时间:2024/05/21 14:02
如今,移动端web页面在市场上也是占有相当大的比例,而移动端的轮播图效果也是很常见的,今天我就来记录下关于实现一组适用于移动端的可用手指进行拨动切换轮播图的效果。这个效果的主要技术点依托于触屏设备特有的touch事件;好了,接下来就进入主题吧。
首先是html布局:
1. 这里强调的是记得给html加上viewport这个适口属性。2. 由于在拨动第一张图片以及最后一张图片的时候需要切换到最后一张以及第一张,要想达到理想效果,需要给第一张图片前面加上最后一张图片,而在最后一张图片后加上第一张图片。3. f_l代表的是左浮动**html代码如下:**
<ul class='banner_imgs clearfix'> <li class='f_l'> <a href="#"><img src="image/l8.jpg" alt="" /></a> </li> <li class='f_l'> <a href="#"><img src="image/l1.jpg" alt="" /></a> </li> <li class='f_l'> <a href="#"><img src="image/l2.jpg" alt="" /></a> </li> <li class='f_l'> <a href="#"><img src="image/l3.jpg" alt="" /></a> </li> <li class='f_l'> <a href="#"><img src="image/l4.jpg" alt="" /></a> </li> <li class='f_l'> <a href="#"><img src="image/l5.jpg" alt="" /></a> </li> <li class='f_l'> <a href="#"><img src="image/l6.jpg" alt="" /></a> </li> <li class='f_l'> <a href="#"><img src="image/l7.jpg" alt="" /></a> </li> <li class='f_l'> <a href="#"><img src="image/l8.jpg" alt="" /></a> </li> <li class='f_l'> <a href="#"><img src="image/l1.jpg" alt="" /></a> </li> </ul> <!-- 轮播图的 索引 --> <ul class="banner_index clearfix"> <li class="current"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
接下来是css样式:
- 注意,此处并没有加上常规的reset样式代码
.jd_banner .banner_imgs { /* 10倍屏幕宽度 */ width: 1000%;}.jd_banner .banner_imgs li { /* 一倍的屏幕宽度 */ width: 10%;}.jd_banner .banner_imgs li a { display: block; width: 100%;}.jd_banner .banner_imgs li a img { display: block; width: 100%;}.jd_banner .banner_index { position: absolute; bottom: 15px; left: 50%; margin-left: -64px;}.jd_banner .banner_index li { float: left; width: 6px; height: 6px; border: 1px solid white; border-radius: 50%; margin: 0 5px;}.jd_banner .banner_index li.current { background-color: #fff;}
最后是最最重要的js代码啦
1. transitionend 过渡结束后触发的效果,在这儿主要是保证图片切换到最后一张我们手动增加的图片完成的瞬间,切换回到真正的第一张图片处;2. touch事件的三要素: touchstart--手指按上时,touchmove--手指移动时,touchend--手指松开屏幕时;3. event.touches[0].clientX获取按下一个手指时的位置,可以打印出event查看其包含有哪些属性方法;
window.onload = function() { slide();}function slide() { var bannerImgs = document.querySelector(".banner_imgs"); var Indexs = document.querySelectorAll(".banner_index li"); var imgLis = document.querySelectorAll(".banner_imgs li"); //屏幕宽度 var screenWidth = document.body.offsetWidth; var index = 1; //默认显示的应该是第二张图片 bannerImgs.style.transform = "translateX(" + screenWidth * index * -1 + "px)"; //添加过渡效果 function setTransition() { bannerImgs.style.webkitTransition = "all .2s"; bannerImgs.style.transition = "all .2s"; } //清除过渡效果 function clearTransition() { bannerImgs.style.webkitTransition = "none"; bannerImgs.style.transition = "none"; } //设置移动距离 function setTranslateX(distance) { bannerImgs.style.webkitTransform = "translateX(" + distance + "px)"; bannerImgs.style.transform = "translateX(" + distance + "px)"; } //控制小圆点 function setPoint() { for (var i = 0; i < Indexs.length; i++) { Indexs[i].className = ""; } Indexs[index - 1].className = "current"; } //设置定时器 var timer = setInterval(function() { index++; setTransition(); setTranslateX(screenWidth * index * -1); }, 1000); //添加过渡动画结束事件 bannerImgs.addEventListener("transitionend", function() { if (index > 8) { index = 1; } else if (index < 1) { index = 8; } clearTransition(); setTranslateX(screenWidth * index * -1); setPoint(); }) //添加touch事件 var startX = 0; var moveX = 0; var isMove = false; bannerImgs.addEventListener("touchstart", function(event) { isMove = false; clearInterval(timer); startX = event.touches[0].clientX; }) bannerImgs.addEventListener("touchmove", function(event) { isMove = true; moveX = event.touches[0].clientX - startX; setTranslateX(moveX + index * screenWidth * -1); }) bannerImgs.addEventListener("touchend", function(event) { if(isMove && Math.abs(moveX) > screenWidth/3){ if (moveX < 0) { index++; } else if (moveX > 0) { index--; } } setTransition(); setTranslateX(index * screenWidth * -1); timer = setInterval(function() { index++; setTransition(); setTranslateX(screenWidth * index * -1); }, 1000); })}
1 0
- 仿京东移动端手指拨动切换轮播图效果
- 1、js原生实现移动端手指滑动轮播图效果
- 移动端手指滑动切换图片框架
- 移动端手指上下滑动切换插件pageSlider
- html5手机端手指滑动选项卡滚动切换效果
- 1、js原生实现移动端手指滑动轮播图效果(2)
- 3、js原生实现移动端手指滑动轮播图效果(3)
- 移动端手指滑动实现轮播效果
- iphone 手指拨动 touch的实例
- 基于zepto.js的移动端H5单页面跟随手指滑动切换控件pageSlider
- AR 移动端手指缩放
- HTML5 移动端 手指事件
- jquery_mobile移动端幻灯片效果,滑动切换,点击切换
- 移动端能用手指滑动的轮播图插件
- 拨动
- 移动和切换动画效果
- svg移动端粗糙手指划过痕迹
- 移动端js判断手指滑动方向
- cocos2d-x游戏摇杆开发
- 微痕迹简介
- onclick 点击事件
- 获取客户端IP
- jsp中几种包含页面的方式区别
- 仿京东移动端手指拨动切换轮播图效果
- (笔记)MVC模式
- rman如何在nomount模式下恢复丢失的所有控制文件
- try catch 中带返回值执行顺序
- spring配置文件头设置default-autowire
- Visual Studio 2015 中关于运行时库的设置 /MD[d]、/MT[d]、/LD[d]
- 阅读小结:The Unreasonable Effectiveness of Noisy Data for Fine-Grained Recognition
- android中重要的几个组件
- 数组