jQuery -- touch事件之轮播图效果
来源：互联网 发布：ebsco数据库 编辑：程序博客网 时间：2024/05/21 21:35
废话不多说，下面放代码，注释很详细，不怕看不懂
效果图预览：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <style type="text/css"> *{ margin: 0; padding: 0; } .content{ position: relative; width: 100%; overflow: hidden; } .net{ -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -o-transform: translate(0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; transition: all .5s; -moz-transition: all .5s; /* Firefox 4 */ -webkit-transition: all .5s; /* Safari 和 Chrome */ -o-transition: all .5s; /* Opera */ position: relative; right: 0; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */ } .net div{ width: 100%; height: 11.76rem; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; text-align: center; line-height: 4.7rem; font-size: 0.94rem; background-size: cover; background-position: 50% 50%; } .net div:nth-child(1){ background-image: url(img/follow-home-banner.jpg); } .net div:nth-child(2){ background-image: url(img/index-banner.jpg); } .net div:nth-child(3){ background-image: url(img/index-list-1.jpg); } .net div:nth-child(4){ background-image: url(img/index-list-2.jpg); } .content .location{ position: absolute; bottom: 0.58rem; left: 50%; transform: translate(-50%, 30%); -ms-transform: translate(-50%, 30%); -o-transform: translate(-50%, 30%); -moz-transform: translate(-50%, 30%); -webkit-transform: translate(-50%, 30%); } .content .location li{ display: inline-block; height: 0.58rem; width: 0.58rem; margin: 0 3px; background-color: darkgrey; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; } .content .location li.on{ background-color: orangered; } </style> </head> <body> <div class="content"> <!--轮播图--> <div class="net"> <div></div> <div></div> <div></div> <div></div> </div> <!--焦点--> <ul class="location"></ul> </div> <script type="text/javascript"> //获取相关数据 var w = parseInt($('.net div').width()); var w_length = $('.net div').length; var c_w = parseInt(($('.net div').length*w)-w); var left = parseInt($('.net').position().left); var i = 0; var bannerTime = 3000; //根据轮播图数量动态添加焦点 for (var j = 0; j < w_length; j++) { if (j < w_length) { $('.location').append('<li></li>'); $('.location li').eq(0).addClass('on'); } } function banner () { //如果播放到最后一张图则跳到第一张图，否则继续下一张 if (left == c_w) { left -= c_w; $('.net').css('right', left + 'px'); }else{ left += w; $('.net').css('right', left + 'px'); } if (i > w_length -2) { i -= w_length -1; $('.location li').eq(i).addClass('on').siblings().removeClass('on'); }else{ i++; $('.location li').eq(i).addClass('on').siblings().removeClass('on'); } } //每隔3秒换一次图 var bannerData = setInterval(banner,bannerTime); //刷新页面更新数据 function defult () { history.go(0); } //窗口大小发生变化刷新页面重新获取数据 $(window).on('resize', function() { defult(); }); $('.net').on('touchstart', function (e) { // 判断默认行为是否可以被禁用 if (e.cancelable) { // 判断默认行为是否已经被禁用 if (!e.defaultPrevented) { e.preventDefault(); } } //触摸开始时获取其X轴和Y轴的坐标 startX = e.originalEvent.changedTouches[0].pageX, startY = e.originalEvent.changedTouches[0].pageY; clearInterval(bannerData); }); $('.net').on('touchend', function (e) { // 判断默认行为是否可以被禁用 if (e.cancelable) { // 判断默认行为是否已经被禁用 if (!e.defaultPrevented) { e.preventDefault(); } } //触摸结束获取其X轴和Y轴的坐标 moveEndX = e.originalEvent.changedTouches[0].pageX, moveEndY = e.originalEvent.changedTouches[0].pageY, //利用触摸开始的坐标和触摸结束的坐标相减 得出的值判断其滑动方向 X = moveEndX - startX, Y = moveEndY - startY; //左滑 if ( X > 0 ) { //若第一张往左滑 则回到最后一张 if (left == 0) { left = c_w; $('.net').css('right', left + 'px'); }else{ left -= w; $('.net').css('right', left + 'px'); } if (i < 0) { i = w_length - 2; $('.location li').eq(i).addClass('on').siblings().removeClass('on'); }else{ i--; $('.location li').eq(i).addClass('on').siblings().removeClass('on'); } } //右滑 else if ( X < 0 ) { //若滑到最后一张图片 则回到第一张图片 if (left == c_w) { left -= c_w; $('.net').css('right', left + 'px'); }else{ left += w; $('.net').css('right', left + 'px'); } if (i > w_length -2) { i -= w_length -1; $('.location li').eq(i).addClass('on').siblings().removeClass('on'); }else{ i++; $('.location li').eq(i).addClass('on').siblings().removeClass('on'); } } //下滑 else if ( Y > 0) { console.log('top 2 bottom'); } //上滑 else if ( Y < 0 ) { console.log('bottom 2 top'); } //单击 else{ console.log('just touch'); } //触摸结束后图片继续播放 bannerData = setInterval(banner,bannerTime); }); </script> </body></html>相关知识传送门：
touch事件基础： http://blog.csdn.net/sinat_19327991/article/details/73823874
`
阅读全文
0 0
- jQuery -- touch事件之轮播图效果
- jQuery -- touch事件之左右切换元素
- jQuery -- touch事件之滑动判断（左右上下方向）
- jQuery -- touch事件之滑动判断（左右上下方向）
- App touch事件(滑动效果)
- 录音效果及Touch事件的分发
- apicolud 中touch事件没有效果相关
- JQuery事件与效果
- Cocos2D-X 之 Touch事件
- Cocos2d-x之Touch事件
- jQuery -- touch事件 touchend失效解决方案
- jquery学习笔记 之二 事件与效果
- 移动端touch事件 之 百度 touch.js 开发文档
- Cocos2d-x之Touch事件处理机制
- Cocos2d-x之Touch事件处理机制
- Cocos2d-x之Touch事件处理机制
- Android之Touch事件分发机制
- Android之Touch事件分发机制
- h5的离线存储怎么使用原理是什么
- CentOS6.5安装openssl
- 何给背景图像使用CSS3变形
- 播放常见问题分析
- CRC校验
- jQuery -- touch事件之轮播图效果
- disruptor总结
- Ones and Zeroes
- Android开发中的单位换算
- RN踩坑之 Windows下打包生成APK
- 上传附件，附件类型问题
- Android好文收藏
- iOS开发
- JVM CPU 占用率高分析
