基于bootstrap.js的自适应轮播

向右看齐 2021-09-10 22:20 362阅读 0赞

首先引入css,js文件

<link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>

轮播代码

<div id="myCarousel" class="carousel slide col-md-4 col-sm-12">
        
        <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>   
        
        <div class="carousel-inner">
            <div class="item active">
                <img src="img/1.jpg" alt="First slide">
                <h3>123456789</h3>
            </div>
            <div class="item">
                <img src="img/2.jpg" alt="Second slide">
                <h3>987654321</h3>
            </div>
            <div class="item">
                <img src="img/3.jpg" alt="Third slide">
                <h3>123456789</h3>
            </div>
        </div>
        
    </div>

改造为移动端手势滑动

<script type="text/javascript">
        var carousels = $(".carousel");  //获取所有的轮播图
        var startX,endX,finalMove;
        var diviation = 60;  //让手指滑动一定距离轮播图才工作
        carousels.on("touchstart",function(event) {
           // console.log(event.originalEvent.touches[0].pageX);
            startX = event.originalEvent.touches[0].pageX;//获取手指接触屏幕时的位置
        });
        carousels.on("touchmove",function(event) {
           // console.log(event.originalEvent.touches[0].pageX);
            endX = event.originalEvent.touches[0].pageX;//手指滑动时该值一直刷新，当手指离开时保留最后一次手指的位置
        })
        carousels.on("touchend",function(event) {
            //console.log(event.originalEvent.touches[0].pageX);
            finalMove = Math.abs(startX - endX) - diviation;
            if(finalMove > 0 && (startX - endX) > 0) {//如果手指滑动方向向左，轮播图向右播放一张图片
                $(this).carousel('next');
            }
            else if (finalMove > 0 && (startX - endX) < 0) {
                $(this).carousel('prev');
            }
        })
    </script>

最终效果：

![6587214-962792d024c81e38.png][]

TIM图片20181020185120.png

[6587214-962792d024c81e38.png]: /images/20210804/f7dacff1d41648db8c1fcbaf95687e2b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，362人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序界面开发-自适应轮播图

一、wxml文件\` <swiper autoplay="true" indicator-dots="true" > <swiper-item wx:for="{ {

雨点打透心脏的1/2处/ 2023年06月16日 10:50/ 0 赞/ 41 阅读

相关 element ui轮播图自适应最简单的实现方式

相信用过[element ui][]组件库的人肯定都有用到轮播图，关于大小官方只提供了一个height属性，字符串类型，也就是说可以使用vh、vw等自适应单位。 ![在这里

红太狼/ 2022年12月28日 06:57/ 0 赞/ 230 阅读

相关微信轮播图自适应高度

原理: 原图宽/原图高 = 屏幕宽/适应屏幕宽后的图片高 wxml <swiper style="height:{ {imgh==0?200:

喜欢ヅ旅行/ 2022年12月28日 04:19/ 0 赞/ 161 阅读

相关 layui框架轮播图实现轮播图片自适应视口缩放

一点JS也不懂，利用layui现成的框架轮播组件，简单的实现了layui框架轮播图自适应视口而缩放效果。以下是代码： <section>

柔光的暖阳◎/ 2022年12月03日 08:54/ 0 赞/ 244 阅读

相关 jQuery实现图片简单轮播——div自适应图片img

今天在网上找图片轮播插件，发现大多功能丰富又跨浏览器。自己也利用jQuery实现了一个。 1.实现的功能：利用jQuery，也是跨平台了嘛 div自适应图

我就是我/ 2022年08月03日 11:59/ 0 赞/ 201 阅读

相关通过更改透明度实现宽高自适应的轮播图

通过更改元素透明度实现轮播图效果。依赖jQuery开发的一个小插件 / Created by Administrator on 2017/6/9.

野性酷女/ 2022年05月26日 00:40/ 0 赞/ 26 阅读

相关用原生js实现轮播图自适应

一些说明这是我根据网上的一位大牛分享的代码进行了一些改动，这是大牛的分享：[http://www.cnblogs.com/LIUYANZUO/p/5679753.htm

﹏ヽ暗。殇╰゛Y/ 2022年03月10日 14:07/ 0 赞/ 245 阅读

相关微信小程序swiper轮播图高度自适应

说明：swiper默认高度150px，且无法更改。解决办法： wxml中：注意 style=‘height:\{ \{Height\}\}’、mode="widthFi

痛定思痛。/ 2022年01月20日 15:07/ 0 赞/ 473 阅读

相关小百度小程序轮播图高度自适应

index.swan部分代码 <swiper indicator-dots="true" autoplay="true" style="height:{

迷南。/ 2021年11月04日 15:52/ 0 赞/ 439 阅读

相关基于bootstrap.js的自适应轮播

首先引入css,js文件 <link rel="stylesheet" href="bootstrap.min.css"> <script src="jq

向右看齐/ 2021年09月10日 22:20/ 0 赞/ 363 阅读