bootstrap图片轮播&触摸滑动事件

最新推荐文章于 2024-07-20 15:49:14 发布

wd0032

最新推荐文章于 2024-07-20 15:49:14 发布

阅读量4.5k

点赞数 1

本文链接：https://blog.csdn.net/wd0032/article/details/80264913

版权

下面是一个简单的幻灯片，使用 Bootstrap 轮播（Carousel）插件显示了一个循环播放元素的通用组件。为了实现轮播，您只需要添加带有该标记的代码即可。不需要使用 data 属性，只需要简单的基于 class 的开发即可。

<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>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>   
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
        </div>
        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
        </div>
        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="carousel-control left" href="#myCarousel" 
       data-slide="prev"> <span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>
    <a class="carousel-control right" href="#myCarousel" 
       data-slide="next">›</a>
</div>

bootstrap的轮播，官方文档里没有看到关于touch事件的处理方法，但是手机流行的现在，很多地方都要用到。

一般情况下，只要你按照顺序加载了jqury1.9.1版本以上，也加载了bootstrap.min.js,并且jqury在前的情况，只要加入如下代码就可以了。

$(document).ready(function(){  
                var startX,endX;//声明触摸的两个变量  
                var offset = 30;//声明触摸距离的变量  
                $('.carousel-inner').on('touchstart',function (e) {  
                    startX= e.originalEvent.touches[0].clientX;//当触摸开始时的x坐标；  
                });  
                $('.carousel-inner').on('touchmove',function (e) {  
                    endX = e.originalEvent.touches[0].clientX;//当触摸离开时的x坐标；  
                });  
                $('.carousel-inner').on('touchend',function (e) {  
                    //当触摸完成时进行的事件；  
                    var distance = Math.abs(startX - endX);//不论正负，取值为正值；  
                    if (distance > offset){  
                        if(startX > endX){  
                            $('#myCarousel').carousel('next');//当开始的坐标大于结束的坐标时，滑动到下一附图  
                        }else{  
                            $('#myCarousel').carousel('prev');//当开始的坐标小于结束的坐标时，滑动到上一附图  
  
                        }  
                                  
                    }  
                });   
            });

这样就可以实现移动端轮播图和手指左右滑动！！！