没有更多推荐了，
不良信息举报
举报内容：
关于bootstrap图片轮播的触摸滑动事件
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！点击这里，将文章分享到自己的动态
让Bootstrap轮播插件carousel支持左右滑动手势的三种方法
因为最近开发的项目涉及到移动设备上的 HTML5 开发，其中需要实现轮播效果。然后最快捷的方式，你知道的（Bootstrap），然后原生的 Bootstrap 的 carousel.js 插件并没有支持手势。
然后......自己想办法呗，再然后，就有下面3种解决方案 ：
jQuery Mobile ()
$(&#carousel-generic&).swipeleft(function() {
$(this).carousel('next');
$(&#carousel-generic&).swiperight(function() {
$(this).carousel('prev');
TouchSwipe jQuery plugin ()
$(&#carousel-generic&).swipe({
swipeLeft: function() { $(this).carousel('next'); },
swipeRight: function() { $(this).carousel('prev'); },
hammer.js () +
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。
若觉得本文不错，就分享一下吧！
评论加载中...
看过此文的用户，还看了以下文章
正在加载中
Web前端工程师修改 Bootstrap 幻灯片的轮播效果切换方式
- 文章 - 文江博客
> 文章详情
修改 Bootstrap 幻灯片的轮播效果切换方式
Bootstrap 的轮播（Carousel）插件制作出的幻灯片，默认的图片切换是左右滑动式的，效果虽然好看也能接受，但是项目需求需要使用淡入淡出的方式切换。
使用 Bootstrap 的轮播（Carousel）插件制作幻灯片，html 代码如下：
&div id="myCarousel" class="carousel slide"&
&!-- 轮播（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&
&!-- 轮播（Carousel）项目 --&
&div class="carousel-inner"&
&div class="item active"&
&img src="http://www.wpmomo.com/wp-content/uploads/2015/04/slider13.png" alt="First slide"&
&div class="item"&
&img src="http://www.wpmomo.com/wp-content/uploads/2015/04/slider2.png" alt="Second slide"&
&!-- 轮播（Carousel）导航 --&
&a class="carousel-control left" href="#myCarousel" data-slide="prev"&&&/a&
&a class="carousel-control right" href="#myCarousel" data-slide="next"&&&/a&
如此制作出的幻灯片，默认的图片切换是左右滑动式的，如何修改它的切换效果呢？将上述代码的：
&div id="myCarousel" class="carousel slide"&
修改一下，加入一个 carousel-fade 类：
&div id="myCarousel" class="carousel-fade carousel slide"&
然后添加 carousel-fade 的 css 样式：
.carousel-fade .carousel-inner .item{
opacity:0;
-webkit-transition-property:
-moz-transition-property:
-ms-transition-property:
-o-transition-property:
transition-property:
.carousel-fade .carousel-inner .active{
opacity: 1;
.carousel-fade .carousel-inner .active.left,.carousel-fade .carousel-inner .active.right{
opacity: 0;
.carousel-fade .carousel-inner .next.left,.carousel-fade .carousel-inner .prev.right {
opacity: 1;
这样，幻灯片的切换效果变成淡入淡出式了。
如果你对这篇文章有疑问，欢迎到本站发帖提问
参与讨论，获取更多帮助。
您暂时不能评论！
管理员开启了需要登录才能够评论，你可以免费注册一个本站的账号。
(C) 2017 WenJiangs / 蜀ICP备号-2&>&touch 移动端web手势滑动完成轮播图切换效果
touch 移动端web手势滑动完成轮播图切换效果
上传大小：717KB
touch 移动端web手势滑动完成轮播图切换效果，此效果仅仅展示了touch功能的冰山一角，更多功能还需要朋友们努力挖掘。
综合评分：5
下载个数：
{%username%}回复{%com_username%}{%time%}\
/*点击出现回复框*/
$(".respond_btn").on("click", function (e) {
$(this).parents(".rightLi").children(".respond_box").show();
e.stopPropagation();
$(".cancel_res").on("click", function (e) {
$(this).parents(".res_b").siblings(".res_area").val("");
$(this).parents(".respond_box").hide();
e.stopPropagation();
/*删除评论*/
$(".del_comment_c").on("click", function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_invalid/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parents(".conLi").remove();
alert(data.msg);
$(".res_btn").click(function (e) {
var parentWrap = $(this).parents(".respond_box"),
q = parentWrap.find(".form1").serializeArray(),
resStr = $.trim(parentWrap.find(".res_area_r").val());
console.log(q);
//var res_area_r = $.trim($(".res_area_r").val());
if (resStr == '') {
$(".res_text").css({color: "red"});
$.post("/index.php/comment/do_comment_reply/", q,
function (data) {
if (data.succ == 1) {
var $target,
evt = e || window.
$target = $(evt.target || evt.srcElement);
var $dd = $target.parents('dd');
var $wrapReply = $dd.find('.respond_box');
console.log($wrapReply);
//var mess = $(".res_area_r").val();
var mess = resS
var str = str.replace(/{%header%}/g, data.header)
.replace(/{%href%}/g, 'http://' + window.location.host + '/user/' + data.username)
.replace(/{%username%}/g, data.username)
.replace(/{%com_username%}/g, data.com_username)
.replace(/{%time%}/g, data.time)
.replace(/{%id%}/g, data.id)
.replace(/{%mess%}/g, mess);
$dd.after(str);
$(".respond_box").hide();
$(".res_area_r").val("");
$(".res_area").val("");
$wrapReply.hide();
alert(data.msg);
}, "json");
/*删除回复*/
$(".rightLi").on("click", '.del_comment_r', function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_comment_del/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parent().parent().parent().parent().parent().remove();
$(e.target).parents('.res_list').remove()
alert(data.msg);
//填充回复
function KeyP(v) {
var parentWrap = $(v).parents(".respond_box");
parentWrap.find(".res_area_r").val($.trim(parentWrap.find(".res_area").val()));
评论共有1条
好尴尬，不能用。
VIP会员动态
CSDN下载频道资源及相关规则调整公告V11.10
下载频道用户反馈专区
下载频道积分规则调整V1710.18
spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip
资源所需积分/C币
当前拥有积分
当前拥有C币
输入下载码
为了良好体验，不建议使用迅雷下载
touch 移动端web手势滑动完成轮播图切换效果
会员到期时间：
剩余下载个数：
剩余积分：0
为了良好体验，不建议使用迅雷下载
积分不足！
资源所需积分/C币
当前拥有积分
您可以选择
程序员的必选
绿色安全资源
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
您的积分不足，将扣除 10 C币
为了良好体验，不建议使用迅雷下载
无法举报自己的资源
你当前的下载分为234。
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可返还被扣除的积分
被举报人：
举报的资源分：
请选择类型
资源无法下载 （ 404页面、下载失败、资源本身问题）
资源无法使用 （文件损坏、内容缺失、题文不符）
侵犯版权资源 （侵犯公司或个人版权）
虚假资源 （恶意欺诈、刷分资源）
含色情、危害国家安全内容
含广告、木马病毒资源
*详细原因：
touch 移动端web手势滑动完成轮播图切换效果基于Bootstrap支持移动端的响应式轮播图效果
当前位置： >
> 基于Bootstrap支持移动端的响应式轮播图效果
bootstrap-carousel-touch-slider是一款基于Bootstrap支持移动端的响应式轮播图效果。该轮播图特效可以使用手指进行滑动切换。并且它和animate.css结合，可以制作出各种炫酷的文字动画效果。
浏览器兼容性
bootstrap-carousel-touch-slider是一款基于Bootstrap支持移动端的响应式轮播图效果。该轮播图特效可以使用手指进行滑动切换。并且它和结合，可以制作出各种炫酷的文字动画效果。
在页面中引入bootstrap相关文件，font-awesome.css字体图标文件，animate.min.css动画文件，以及jquery.touchSwipe.min.js文件。
&link href="path/to/bootstrap.min.css" rel="stylesheet"&
&link href="path/to/font-awesome.min.css" rel="stylesheet"&
&link href="path/to/animate.min.css" rel="stylesheet"&
&script src="path/to/jquery.min.js"&&/script&
&script src="path/to/bootstrap.min.js"&&/script&
&script src="path/to/jquery.touchSwipe.min.js"&&/script&
该轮播图采用标准的Bootstrap Carousel作为HTML结构。一个基本的Bootstrap Carousel的HTML结构如下：
&div id="carousel-example-generic" class="carousel slide" data-ride="carousel"&
&!-- Indicators --&
&ol class="carousel-indicators"&
&li data-target="#carousel-example-generic" data-slide-to="0" class="active"&&/li&
&li data-target="#carousel-example-generic" data-slide-to="1"&&/li&
&li data-target="#carousel-example-generic" data-slide-to="2"&&/li&
&!-- Wrapper for slides --&
&div class="carousel-inner" role="listbox"&
&div class="item active"&
&img src="..." alt="..."&
&div class="carousel-caption"&
&div class="item"&
&img src="..." alt="..."&
&div class="carousel-caption"&
&!-- Controls --&
&a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"&
&span class="glyphicon glyphicon-chevron-left"&&/span&
&span class="sr-only"&Previous&/span&
&a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"&
&span class="glyphicon glyphicon-chevron-right"&&/span&
&span class="sr-only"&Next&/span&
修改之后，最外层的包裹div元素的class类如下：
&div id="bootstrap-touch-slider"
class="carousel bs-slider fade
control-round indicators-line"
data-ride="carousel"
data-pause="hover"
data-interval="5000" &
此时，轮播图的切换方式为淡入淡出方式。如果你项使用滑动切换方式，可以将fade改为slide。
另外，有几个class类用于控制文本的对齐方式，它们是：slide_style_center, slide_style_left, slide_style_right。
最后，文本的动画都是基于的，你可以自己进行配置。
初始化插件
在页面DOM元素加载完毕之后，可以通过bsTouchSlider()方法来初始化该轮播图。
$('#bootstrap-touch-slider').bsTouchSlider();
bootstrap-carousel-touch-slider轮播图的github地址为：
本文版权属于jQuery之家，转载请注明出处：
您已经顶过了哦！}