第八章 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法
因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果。然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支持手势。
然后......自己想办法呗,再然后,就有下面3种解决方案 :
jQuery Mobile (http://jquerymobile.com/download/)
$("#carousel-generic").swipeleft(function() { $(this).carousel('next'); }); $("#carousel-generic").swiperight(function() { $(this).carousel('prev'); });
TouchSwipe jQuery plugin (https://github.com/mattbryson/TouchSwipe-Jquery-Plugin)
$("#carousel-generic").swipe({ swipeLeft: function() { $(this).carousel('next'); }, swipeRight: function() { $(this).carousel('prev'); }, });
hammer.js (http://eightmedia.github.io/hammer.js/) +
jquery.hammer.js (https://github.com/EightMedia/jquery.hammer.js)
$('#carousel-generic').hammer().on('swipeleft', function(){ $(this).carousel('next'); }); $('#carousel-generic').hammer().on('swiperight', function(){ $(this).carousel('prev'); });
单单为了支持滑动手势而导入整个 jQuery Mobile 貌似有些大材小用,(现在英文原文中已经抽离,可下载)
而 TouchSwipe 在两边可点击按钮区域滑动无效,然后选择了 Hammer。
英文原文:http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/
原文:http://www.weste.net/2014/7-16/97866.html?utm_source=tuicool&utm_medium=referral
原生js封装轮播图
原文:https://www.cnblogs.com/webmuluo/p/11101791.html
推荐:https://www.cnblogs.com/zhuzhenwei918/p/6416880.html
轮播图介绍 : 三张图片,图片下方有对应图片数量的三个指示点,左右有切换指示,左右指示可要可不要
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 | < style > #mlBox{ width: 600px; height: 500px; position: relative; margin: 50px auto; border: 1px #ececec solid; } #mlImg{ width: 600px; height: 500px; } #mlImg img{ width: 600px; height: 500px; display: none; } #mlSpan{ width: auto; height: 10px; position: absolute; left: 50%; bottom: 20px; } #mlSpan span{ display: block; float: left; width: 10px; height: 10px; background: cornflowerblue; border-radius: 50%; margin: 0 2px; z-index: 100; } #mlImg #mlShow{ display: block; } #mlSpan #mlOn{ background: chartreuse; } #mlLeft{ width: 30px; height: 30px; background: rgba(51,51,51,0.7); position: absolute; left: 0; top: 50%; display: none; } #mlLeft img{ width: 30px; height: 30px; display: block; } #mlRight img{ width: 30px; height: 30px; display: block; } #mlRight{ width: 30px; height: 30px; background: rgba(51,51,51,0.7); position: absolute; right: 0; top: 50%; display: none; } </ style > < div id="mlBox"> < div id="mlImg"> < img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=511087584,1746612192&fm=26&gp=0.jpg" alt="" id="mlShow"> < img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2251986177,3999926444&fm=26&gp=0.jpg" alt=""> < img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2929314891,994527773&fm=26&gp=0.jpg" alt=""> </ div > < p id="mlSpan"> < span id="mlOn"></ span > < span ></ span > < span ></ span > </ p > < div id="mlLeft"> < img src="image/mlLeft.png" alt=""> </ div > < div id="mlRight"> < img src="image/mlRight.png" alt=""> </ div > </ div > < script > ml(true); //调用ml函数 注:传参是否需要左右指示 默认false function ml(indicator) { var oMlBox = document.getElementById('mlBox'); //获取id:mlBox var oMlImg = document.getElementById('mlImg'); //获取id:mlImg var oMlSpan = document.getElementById('mlSpan'); //获取id:mlSpan var aSpan = oMlSpan.getElementsByTagName('span'); //获取id:mlSpan里面的span标签 var aImg = oMlImg.getElementsByTagName('img'); //获取id:mlImg里面的img标签 var oMlLeft = document.getElementById('mlLeft'); //获取id:mlLeft var oMlRight = document.getElementById('mlRight'); //获取id:mlRight var u = 0; //当前照片位置 var shut = null; //定时器的名字 function f1() { for (var i = 0; i < aSpan.length ; i++) { //循环id:mlSpan里面的span标签 aSpan[i].id = ''; //让span标签的id等于空 aImg[i].id = ''; //让id:mlImg里面img标签id等空 } aSpan[u].id = 'mlOn'; //当前位置的span标签id等于mlOn aImg[u].id = 'mlShow'; //当前位置的img标签id等于mlShow } for (var f = 0; f < aSpan.length; f++) { //循环id:mlSpan里面的span标签 aSpan[f].index = f; //span标签第f个的index等于f aSpan[f].onclick = function () { //点击span标签 注:照片下面的三个点 u = this.index; //当前位置等于当前span标签index的位置 f1(); //调用f1函数 } } oMlBox.onmousemove = function () { //鼠标悬浮id:mlBox clearInterval(shut); //关闭定时器 if (indicator) { //是否显示左右指示 注:调用ml函数传参 oMlLeft.style.display = 'block'; //显示左指示 oMlRight.style.display = 'block'; //显示右指示 oMlRight.onclick = function () { //点击右指示 u++; //当前位置加一 if (u >= aImg.length) { //当前位置大于照片的数量就等于0 u = 0; } f1(); //调用f1函数 }; oMlLeft.onclick = function () { //点击左指示 u--; //当前位置减一 if (u < 0 ) { //当前位置小于0时就让当前位置等于照片数量减一 u = aImg.length - 1; //注:因为计算机从零开始数所以要减一 } f1(); //调用f1函数 }; }else{ oMlLeft.style.display = 'none'; //左指示消失 oMlRight.style.display = 'none'; //右指示消失 } }; oMlBox.onmouseout = function () { //当鼠标移出id:mlBox f2(); //调用f2函数 oMlLeft.style.display = 'none'; //左指示消失 oMlRight.style.display = 'none'; //右指示消失 }; function f2(){ shut = setInterval(function () { //定时器 u++; //每3秒当前位置加一 if (u >= aImg.length) { //当前位置大于等于照片的数量当前位置等于0 u = 0; } f1(); //调用f1函数 },3000); } f2(); //调用f2函数 } </ script > |
作者:心存善念
本文地址:https://www.cnblogs.com/xcsn/p/4927633.html
欢迎转载,请在明显位置给出出处及链接。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
· DeepSeek V3 两周使用总结
· 回顾我的软件开发经历(1)
· C#使用yield关键字提升迭代性能与效率
· 低成本高可用方案!Linux系统下SQL Server数据库镜像配置全流程详解
· 4. 使用sql查询excel内容