导航:首页 > 编程语言 > carouseljs自动轮播

carouseljs自动轮播

发布时间:2023-08-05 20:42:20

1. Bootstrap如何实现触屏左右滑动轮播

我自己写的BS轮播加手势滑动,引入了一个插件,直接看代码吧:


js">//引入插件
<linkhref="css/bootstrap.min.css"rel="stylesheet">
<scriptsrc="js/jquery.min.js"></script>
<scriptsrc="js/bootstrap.min.js"></script>
<scriptsrc="js/jgestures.min.js"></script>

JS代码:

<script>
$(document).ready(function(){
//手势右滑回到上一个画面
$('#myCarousel').bind('',function(){
$("#myCarousel").carousel('prev');
})
//手势左滑进入下一个画面
$('#myCarousel').bind('',function(){
$("#myCarousel").carousel('next');
})
})
</script>

HTML代码:

<divid="myCarousel"class="carouselslidepad_010b_k"data-ride="carousel">
<!--轮播(Carousel)指标-->
<olclass="carousel-indicators">
<lidata-target="#myCarousel"data-slide-to="0"class="active"></li>
<lidata-target="#myCarousel"data-slide-to="1"></li>
<lidata-target="#myCarousel"data-slide-to="2"></li>
</ol>
<!--轮播(Carousel)项目-->
<divclass="carousel-innerbor_btm">
<divclass="itemactive">
<divclass="rowmarg_0pad_t_10">
<divclass="col-xs-3nav_tag_ico">
<imgsrc="images/yule.png"width="70%">
<pclass="nav_tag_t">娱乐</p>
</div>
<divclass="col-xs-3nav_tag_ico">
<imgsrc="images/huodong.png"width="70%">
<pclass="nav_tag_t">活动</p>
</div>
<divclass="col-xs-3nav_tag_ico">
<imgsrc="images/tuangou.png"width="70%">
<pclass="nav_tag_t">团购</p>
</div>
<divclass="col-xs-3nav_tag_ico">
<imgsrc="images/huiyuanka.png"width="70%">
<pclass="nav_tag_t">会员卡</p>
</div>
<divclass="col-xs-3nav_tag_ico">
<imgsrc="images/meishi.png"width="70%">
<pclass="nav_tag_t">美食</p>
</div>
<divclass="col-xs-3nav_tag_ico">
<imgsrc="images/dianying.png"width="70%">
<pclass="nav_tag_t">电影</p>
</div>
<divclass="col-xs-3nav_tag_ico">
<imgsrc="images/jiudian.png"width="70%">
<pclass="nav_tag_t">酒店</p>
</div>
<divclass="col-xs-3nav_tag_ico">
<imgsrc="images/waimai.png"width="70%">
<pclass="nav_tag_t">外卖</p>
</div>
</div>
</div>
<divclass="item">
<divclass="rowmarg_0pad_t_10">
<divclass="col-xs-3nav_tag_ico">
<imgsrc="images/qinzi.png"width="70%">
<pclass="nav_tag_t">亲子</p>
</div>
<divclass="col-xs-3nav_tag_ico">
<imgsrc="images/zuliao.png"width="70%">
<pclass="nav_tag_t">足疗按摩</p>
</div>
<divclass="col-xs-3nav_tag_ico">
<imgsrc="images/jingdian.png"width="70%">
<pclass="nav_tag_t">景点</p>
</div>
<divclass="col-xs-3nav_tag_ico">
<imgsrc="images/jia.png"width="70%">
<pclass="nav_tag_t">到家</p>
</div>
<divclass="col-xs-3nav_tag_ico">
<imgsrc="images/yundong.png"width="70%">
<pclass="nav_tag_t">运动健身</p>
</div>
<divclass="col-xs-3nav_tag_ico">
<imgsrc="images/gouwu.png"width="70%">
<pclass="nav_tag_t">购物</p>
</div>
<divclass="col-xs-3nav_tag_ico">
<imgsrc="images/KTV.png"width="70%">
<pclass="nav_tag_t">KTV</p>
</div>
<divclass="col-xs-3nav_tag_ico">
<imgsrc="images/jiehun.png"width="70%">
<pclass="nav_tag_t">结婚</p>
</div>
</div>
</div>
<divclass="item">
<divclass="rowmarg_0pad_t_10">
<divclass="col-xs-3nav_tag_ico">
<imgsrc="images/chongwu.png"width="70%">
<pclass="nav_tag_t">宠物</p>
</div>
<divclass="col-xs-3nav_tag_ico">
<imgsrc="images/aiche.png"width="70%">
<pclass="nav_tag_t">爱车</p>
</div>
<divclass="col-xs-3nav_tag_ico">
<imgsrc="images/youhui_002.png"width="70%">
<pclass="nav_tag_t">优惠</p>
</div>
<divclass="col-xs-3nav_tag_ico">
<imgsrc="images/yanchu.png"width="70%">
<pclass="nav_tag_t">演出</p>
</div>
<divclass="col-xs-3nav_tag_ico">
<imgsrc="images/kafei.png"width="70%">
<pclass="nav_tag_t">咖啡厅</p>
</div>
<divclass="col-xs-3nav_tag_ico">
<imgsrc="images/jiaoyu.png"width="70%">
<pclass="nav_tag_t">教育培训</p>
</div>
<divclass="col-xs-3nav_tag_ico">
<imgsrc="images/jiazhuang.png"width="70%">
<pclass="nav_tag_t">家装</p>
</div>
<divclass="col-xs-3nav_tag_ico">
<imgsrc="images/qita.png"width="70%">
<pclass="nav_tag_t">全部分类</p>
</div>
</div>
</div>
</div>
</div>

CSS代码就自己写吧,相信难不倒你

阅读全文

与carouseljs自动轮播相关的资料

热点内容
js怎么单击改变标签里的文字 浏览:760
实例配置文件里的sid是什么 浏览:43
ps文件模糊 浏览:192
叶檀财经推出过什么购物APP 浏览:875
linux硬盘检测 浏览:431
如何用路由器降低网络延迟 浏览:601
aix分区root密码 浏览:439
运动鞋买鞋上什么app 浏览:904
NSA工具下载 浏览:918
函数代码在哪个文件夹 浏览:213
微信应用怎么代码添加快捷方式 浏览:371
用数据说话是最有力的什么 浏览:27
图片文件被锁定无法打开 浏览:768
wr886nv2升级 浏览:490
移动硬盘视频文件无法删除 浏览:417
如何查看网络监控 浏览:132
打印机如何连接到网络打印机 浏览:181
vmlinux安装tools 浏览:768
波形文件转mp3 浏览:803
linux查看网络 浏览:163

友情链接