Bootstrap如何实现触屏左右滑动轮播？ bootstrap如何支持手势左右划动轮播图
Bootstrap\u5982\u4f55\u5b9e\u73b0\u6ed1\u52a8\u8f6e\u64adpublic void actionPerformed(ActionEvent e)
{
if(e.getSource()==xinjian)
{
text.setText("");
}
if(e.getSource()==dakai)
{
openFD.show();
String s;
\u540c\u6837\u5efaNJ\u6811\uff0c\u4e3a\u4ec0\u4e48MEGA\u7b97\u5f97\u90a3\u4e48\u5feb\uff0cphylip\u7b97nj\u4e4b\u524d\u8981\u7b97dist\uff0cmega\u4e5f\u7b97\u5417\uff1f
\u2014\u2014\u6ca1\u7528\u8fc7phlip\uff0c\u4e0d\u77e5\u9053\u5177\u4f53\u60c5\u51b5\uff0c\u4f46\u662f\u6784\u5efaNJ\u6811\u7684\u57fa\u7840\u90fd\u662f\u5148\u8ba1\u7b97\u51fa\u4e24\u4e24\u8ddd\u79bb\uff0c\u7136\u540e\u518d\u6839\u636e\u8ddd\u79bb\u5927\u5c0f\u753b\u51fa\u6811\u56fe\uff0c\u81f3\u4e8e\u4e3a\u5565MEGA\u8981\u5feb\uff0c\u53ef\u80fd\u662f\u7a0b\u5e8f\u7f16\u8f91\u7684\u4e0d\u4e00\u6837\u5427\uff0c\u5c31\u50cf\u6211\u7528PAUP\u8ba1\u7b97MP\u548cNJ\u6811\u65f6\uff0c\u7279\u522b\u662f\u5e8f\u5217\u5f88\u591a\u7684\u65f6\u5019\uff0c\u6bd4MEGA\u5feb\u5f97\u4e0d\u662f\u4e00\u500d\u4e24\u500d\u3002
我自己写的BS轮播加手势滑动，引入了一个插件，直接看代码吧：
//引入插件
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jgestures.min.js"></script>
JS代码：
<script>
$(document).ready(function(){
//手势右滑 回到上一个画面
$('#myCarousel').bind('swiperight swiperightup swiperightdown',function(){
$("#myCarousel").carousel('prev');
})
//手势左滑 进入下一个画面
$('#myCarousel').bind('swipeleft swipeleftup swipeleftdown',function(){
$("#myCarousel").carousel('next');
})
})
</script>
HTML代码：
<div id="myCarousel" class="carousel slide pad_010 b_k" data-ride="carousel">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner bor_btm">
<div class="item active">
<div class="row marg_0 pad_t_10">
<div class="col-xs-3 nav_tag_ico">
<img src="images/yule.png" width="70%">
<p class="nav_tag_t">娱乐</p>
</div>
<div class="col-xs-3 nav_tag_ico">
<img src="images/huodong.png" width="70%">
<p class="nav_tag_t">活动</p>
</div>
<div class="col-xs-3 nav_tag_ico">
<img src="images/tuangou.png" width="70%">
<p class="nav_tag_t">团购</p>
</div>
<div class="col-xs-3 nav_tag_ico">
<img src="images/huiyuanka.png" width="70%">
<p class="nav_tag_t">会员卡</p>
</div>
<div class="col-xs-3 nav_tag_ico">
<img src="images/meishi.png" width="70%">
<p class="nav_tag_t">美食</p>
</div>
<div class="col-xs-3 nav_tag_ico">
<img src="images/dianying.png" width="70%">
<p class="nav_tag_t">电影</p>
</div>
<div class="col-xs-3 nav_tag_ico">
<img src="images/jiudian.png" width="70%">
<p class="nav_tag_t">酒店</p>
</div>
<div class="col-xs-3 nav_tag_ico">
<img src="images/waimai.png" width="70%">
<p class="nav_tag_t">外卖</p>
</div>
</div>
</div>
<div class="item">
<div class="row marg_0 pad_t_10">
<div class="col-xs-3 nav_tag_ico">
<img src="images/qinzi.png" width="70%">
<p class="nav_tag_t">亲子</p>
</div>
<div class="col-xs-3 nav_tag_ico">
<img src="images/zuliao.png" width="70%">
<p class="nav_tag_t">足疗按摩</p>
</div>
<div class="col-xs-3 nav_tag_ico">
<img src="images/jingdian.png" width="70%">
<p class="nav_tag_t">景点</p>
</div>
<div class="col-xs-3 nav_tag_ico">
<img src="images/daojia.png" width="70%">
<p class="nav_tag_t">到家</p>
</div>
<div class="col-xs-3 nav_tag_ico">
<img src="images/yundong.png" width="70%">
<p class="nav_tag_t">运动健身</p>
</div>
<div class="col-xs-3 nav_tag_ico">
<img src="images/gouwu.png" width="70%">
<p class="nav_tag_t">购物</p>
</div>
<div class="col-xs-3 nav_tag_ico">
<img src="images/KTV.png" width="70%">
<p class="nav_tag_t">KTV</p>
</div>
<div class="col-xs-3 nav_tag_ico">
<img src="images/jiehun.png" width="70%">
<p class="nav_tag_t">结婚</p>
</div>
</div>
</div>
<div class="item">
<div class="row marg_0 pad_t_10">
<div class="col-xs-3 nav_tag_ico">
<img src="images/chongwu.png" width="70%">
<p class="nav_tag_t">宠物</p>
</div>
<div class="col-xs-3 nav_tag_ico">
<img src="images/aiche.png" width="70%">
<p class="nav_tag_t">爱车</p>
</div>
<div class="col-xs-3 nav_tag_ico">
<img src="images/youhui_002.png" width="70%">
<p class="nav_tag_t">优惠</p>
</div>
<div class="col-xs-3 nav_tag_ico">
<img src="images/yanchu.png" width="70%">
<p class="nav_tag_t">演出</p>
</div>
<div class="col-xs-3 nav_tag_ico">
<img src="images/kafei.png" width="70%">
<p class="nav_tag_t">咖啡厅</p>
</div>
<div class="col-xs-3 nav_tag_ico">
<img src="images/jiaoyu.png" width="70%">
<p class="nav_tag_t">教育培训</p>
</div>
<div class="col-xs-3 nav_tag_ico">
<img src="images/jiazhuang.png" width="70%">
<p class="nav_tag_t">家装</p>
</div>
<div class="col-xs-3 nav_tag_ico">
<img src="images/qita.png" width="70%">
<p class="nav_tag_t">全部分类</p>
</div>
</div>
</div>
</div>
</div>
CSS代码就自己写吧，相信难不倒你
绛旓細$(document).ready(function(){//鎵嬪娍鍙虫粦 鍥炲埌涓婁竴涓敾闈$('#myCarousel').bind('swiperight swiperightup swiperightdown',function(){ $("#myCarousel").carousel('prev'); })//鎵嬪娍宸︽粦 杩涘叆涓嬩竴涓敾闈$('#myCarousel').bind('swipeleft swipeleftup swipeleftdown',function(){$...
绛旓細鍦bootstrap鐨勬牴鐩綍涓嬫柊寤轰竴涓猟emo.html鏂囦欢锛岋紙娉ㄦ剰锛屽繀椤诲湪鏍圭洰褰曚笅闈㈡柊寤猴紝鍥犱负鍚庨潰鐨勬楠や腑瑕佸皢bootstrap妗嗘灦涓殑css鍜宩s鏂囦欢閾炬帴鍒板垱寤虹殑demo涓級缂栬緫demo.html鏂囦欢锛屾坊鍔犲bootstrap妗嗘灦涓璫ss鍜宩s鐨勫紩鐢紝鍐呭濡備笅锛屽浘鐗囨湁娉ㄩ噴璇存槑锛岃繖鏍凤紝鎴戜滑灏卞熀鏈笂寤虹珛浜嗗bootstrap妗嗘灦鐨勫熀鏈娇鐢ㄦ灦鏋 婧愮爜锛<!
绛旓細0 鏈杩戝彂鐜颁竴涓Bootstrap鐨勫搷搴斿紡鐨勫鑸佷釜浜鸿寰楅潪甯镐笉閿欍佷笉浠呬唬鐮侀毦鍐欑畝鍗曘佹晥鏋滆繕闈炲父涓嶉敊銆佹鍝嶅簲寮忓鑸紙Responsive Nav锛夋彃浠朵笉渚濊禆浜庝换浣曠涓夋柟宸ュ叿搴撱佸苟涓旀敮鎸瑙﹀睆鎿嶄綔銆佽皟鏁村綋鍓嶇獥鍙ｅぇ灏忓嵆鍙湅鍒版儕鑹崇殑鏁堟灉銆佸搷搴斿紡瀵艰埅锛圧esponsive Nav锛夋槸涓涓緢灏忕殑JavaScript鎻掍欢銆佸帇缂╀箣鍚庝粎鏈1.7KB銆佽兘甯綘...
绛旓細杩欐涓嶆槸绠鍗曠殑澧炲姞涓浜涘彲閫夌殑閽堝绉诲姩璁惧鐨勬牱寮忥紝鑰屾槸鐩存帴铻嶅悎杩涗簡妗嗘灦鐨勫唴鏍镐腑銆備篃灏辨槸璇达紝Bootstrap 鏄Щ鍔ㄨ澶囦紭鍏堢殑銆傞拡瀵圭Щ鍔ㄨ澶囩殑鏍峰紡铻嶅悎杩涗簡妗嗘灦鐨勬瘡涓钀斤紝鑰屼笉鏄鍔犱竴涓澶栫殑鏂囦欢銆備负浜嗙‘淇濋傚綋鐨勭粯鍒跺拰瑙﹀睆缂╂斁锛岄渶瑕佸湪涔嬩腑娣诲姞 viewport 鍏冩暟鎹爣绛俱侰opy 鍦ㄧЩ鍔ㄨ澶囨祻瑙堝櫒涓婏紝閫氳繃涓鸿...
绛旓細鎮ㄥ彲浠ラ氳繃涓涓懡浠ゅ垱寤烘潵娴嬭瘯鍜屼娇鐢ㄥ熀浜庝换浣曞钩鍙颁笂鐨 ionic 搴旂敤銆傛澶栵紝璇ユ鏋朵负瀹冭嚜宸辩殑缁勪欢鎻愪緵浜嗕竴濂 Angular 鎸囦护锛堣嚜瀹氫箟鐨 HTML 鍏冪礌锛夛紝浠庤屼娇瀹冨彲浠ョ畝鍗曠殑缂栧啓涓琛 HTML 浠ｇ爜銆傜被浼兼寚浠わ紝瀹冧娇鐢ㄨ鍥惧姩鐢婚昏緫锛屽紓姝ラ氫俊锛孉ngular 鐨勮Е鎽歌瘑鍒拰 HTML 娓呮磥澶勭悊銆係iimpler Siimpler 鏄竴涓畝鍗曠殑 HTML...
绛旓細Mobl浣跨敤涓绉嶄笌JavaScript闈炲父绫讳技鐨勮剼鏈瑷瀹炵幇浜嗛潤鎬佺被鍨嬬殑鎺ㄦ柇璇█銆傝璇█鎷ユ湁浠ヤ笅椤剁骇缁撴瀯锛 瀹炰綋锛坋ntities锛夈佺被鍨嬶紙types锛夈佸嚱鏁帮紙functions锛夈佹帶浠讹紙controls锛夈佸睆骞曪紙screens锛夈佹牱寮忥紙styles 锛夊拰璁惧锛坰ervices锛夈傚疄浣撴槸鍦ㄦ湰鍦板瓨鍌ㄤ腑鎸佷箙鍖栫殑鏁版嵁鍏冪礌锛岃岀被鍨嬫槸涓绉嶄緵鎴戜滑浣跨敤鐨勪笉绋冲畾鐨勬暟鎹...
绛旓細鐜拌薄涓锛氭墜鏈轰笉寮鏈(鎵嬫満鐢垫睜鍙媶鍗)瑙ｅ喅鏂规硶锛氭柊鎵嬫満鏀句笂鐢垫睜棣栨寮鏈猴紝鎵嬫満瑕佸仛鍒濆鍖栫殑鎿嶄綔锛屽紑鏈烘椂闂翠細杈冮暱锛屾湁鍙兘琚璁や负涓嶅紑鏈恒傚浜庣數姹犺繃搴︽斁鐢甸犳垚鐨勪笉寮鏈猴紝鍙栦笅鐢垫睜锛屾墜鏈鸿繛鎺ュ厖鐢靛櫒鐪嬭兘鍚﹀紑鏈猴紝濡傚彲浠ュ紑鏈猴紝灏嗙數姹犺涓婂厖鐢30鍒嗛挓浠ヤ笂锛屽彲姝ｅ父寮鏈恒傜幇璞′簩锛氭墜鏈烘斁鍦ㄥ彛琚嬩腑锛瑙︽懜灞涓庤韩浣撴帴瑙...
绛旓細瀛︿範鐨勫唴瀹瑰寘鎷細鈶犺绠楁満鍩虹浠ュ強PS鍩虹 鈶″墠绔紑鍙戝熀纭锛圚TML5寮鍙戙丣avaScript鍩虹鍒伴珮绾с乯Query缃戦〉鐗规晥銆Bootstrap妗嗘灦锛夆憿绉诲姩寮鍙 鈶ｅ墠绔珮绾у紑鍙戯紙ECMAScript6銆乂eu.js妗嗘灦寮鍙戙亀ebpack銆佸墠绔〉闈紭鍖栥丷eact妗嗘灦寮鍙戙丄ngularJS 2.0妗嗘灦寮鍙戠瓑锛夆懁灏忕▼搴忓紑鍙 鈶ュ叏鏍堝紑鍙戯紙MySQL鏁版嵁搴撱丳ython缂栫▼璇█...
绛旓細<!-- viewport鐨勬爣绛撅紝杩欎釜鏍囩鍙互淇敼鍦ㄥぇ閮ㄥ垎鐨勭Щ鍔ㄨ澶囦笂闈㈢殑鏄剧ず锛屼负浜嗙‘淇濋傚綋鐨勭粯鍒跺拰瑙﹀睆缂╂斁銆--> 鏃犳爣棰樻枃妗 <!--鏍峰紡鏂囦欢寮曠敤--> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view ...
绛旓細<!-- viewport鐨勬爣绛撅紝杩欎釜鏍囩鍙互淇敼鍦ㄥぇ閮ㄥ垎鐨勭Щ鍔ㄨ澶囦笂闈㈢殑鏄剧ず锛屼负浜嗙‘淇濋傚綋鐨勭粯鍒跺拰瑙﹀睆缂╂斁銆--> 鏃犳爣棰樻枃妗 <!--鏍峰紡鏂囦欢寮曠敤--> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view ...
