第八章 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法

因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果。然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支持手势。

然后......自己想办法呗,再然后,就有下面3种解决方案 :

jQuery Mobile (http://jquerymobile.com/download/)

 $("#carousel-generic").swipeleft(function() {
  $(this).carousel('next');
 });

 $("#carousel-generic").swiperight(function() {
  $(this).carousel('prev');
 });

 

TouchSwipe jQuery plugin (https://github.com/mattbryson/TouchSwipe-Jquery-Plugin)

 $("#carousel-generic").swipe({
  swipeLeft: function() { $(this).carousel('next'); },
  swipeRight: function() { $(this).carousel('prev'); },
 });

 

hammer.js (http://eightmedia.github.io/hammer.js/) + 
jquery.hammer.js (https://github.com/EightMedia/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。

英文原文:http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/

 

原文:http://www.weste.net/2014/7-16/97866.html?utm_source=tuicool&utm_medium=referral

 

原生js封装轮播图

原文:https://www.cnblogs.com/webmuluo/p/11101791.html

推荐:https://www.cnblogs.com/zhuzhenwei918/p/6416880.html

轮播图介绍 : 三张图片,图片下方有对应图片数量的三个指示点,左右有切换指示,左右指示可要可不要

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<style>
        #mlBox{
            width: 600px;
            height: 500px;
            position: relative;
            margin: 50px auto;
            border: 1px #ececec solid;
        }
        #mlImg{
            width: 600px;
            height: 500px;
        }
        #mlImg img{
            width: 600px;
            height: 500px;
            display: none;
        }
        #mlSpan{
            width: auto;
            height: 10px;
            position: absolute;
            left: 50%;
            bottom: 20px;
        }
        #mlSpan span{
            display: block;
            float: left;
            width: 10px;
            height: 10px;
            background: cornflowerblue;
            border-radius: 50%;
            margin: 0 2px;
            z-index: 100;
        }
        #mlImg #mlShow{
            display: block;
        }
        #mlSpan #mlOn{
            background: chartreuse;
        }
        #mlLeft{
            width: 30px;
            height: 30px;
            background: rgba(51,51,51,0.7);
            position: absolute;
            left: 0;
            top: 50%;
            display: none;
        }
        #mlLeft img{
            width: 30px;
            height: 30px;
            display: block;
        }
        #mlRight img{
            width: 30px;
            height: 30px;
            display: block;
        }
        #mlRight{
            width: 30px;
            height: 30px;
            background: rgba(51,51,51,0.7);
            position: absolute;
            right: 0;
            top: 50%;
            display: none;
        }
</style>
<div id="mlBox">
        <div id="mlImg">
            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=511087584,1746612192&fm=26&gp=0.jpg" alt="" id="mlShow">
            <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2251986177,3999926444&fm=26&gp=0.jpg" alt="">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2929314891,994527773&fm=26&gp=0.jpg" alt="">
        </div>
        <p id="mlSpan">
            <span id="mlOn"></span>
            <span></span>
            <span></span>
        </p>
        <div id="mlLeft">
            <img src="image/mlLeft.png" alt="">
        </div>
        <div id="mlRight">
            <img src="image/mlRight.png" alt="">
        </div>
    </div>
     
    <script>
    ml(true);  //调用ml函数  注:传参是否需要左右指示  默认false
    function ml(indicator) {
        var oMlBox = document.getElementById('mlBox');  //获取id:mlBox
        var oMlImg = document.getElementById('mlImg');  //获取id:mlImg
        var oMlSpan = document.getElementById('mlSpan');  //获取id:mlSpan
        var aSpan = oMlSpan.getElementsByTagName('span');  //获取id:mlSpan里面的span标签
        var aImg = oMlImg.getElementsByTagName('img');  //获取id:mlImg里面的img标签
        var oMlLeft = document.getElementById('mlLeft');  //获取id:mlLeft
        var oMlRight = document.getElementById('mlRight');  //获取id:mlRight
        var u = 0;  //当前照片位置
        var shut = null;  //定时器的名字
        function f1() {
            for (var i = 0; i < aSpan.length; i++) {  //循环id:mlSpan里面的span标签
                aSpan[i].id = '';  //让span标签的id等于空
                aImg[i].id = '';  //让id:mlImg里面img标签id等空
            }
            aSpan[u].id = 'mlOn';  //当前位置的span标签id等于mlOn
            aImg[u].id = 'mlShow';  //当前位置的img标签id等于mlShow
        }
        for (var f = 0; f < aSpan.length; f++) {  //循环id:mlSpan里面的span标签
            aSpan[f].index = f;  //span标签第f个的index等于f
            aSpan[f].onclick = function () {  //点击span标签  注:照片下面的三个点
                u = this.index;  //当前位置等于当前span标签index的位置
                f1();  //调用f1函数
            }
        }
        oMlBox.onmousemove = function () {  //鼠标悬浮id:mlBox
            clearInterval(shut);  //关闭定时器
            if (indicator) {  //是否显示左右指示  注:调用ml函数传参
                oMlLeft.style.display = 'block';  //显示左指示
                oMlRight.style.display = 'block';  //显示右指示
                oMlRight.onclick = function () {  //点击右指示
                    u++;  //当前位置加一
                    if (u >= aImg.length) {  //当前位置大于照片的数量就等于0
                        u = 0;
                    }
                    f1();  //调用f1函数
                };
                oMlLeft.onclick = function () {  //点击左指示
                    u--;  //当前位置减一
                    if (u < 0) {  //当前位置小于0时就让当前位置等于照片数量减一
                        u = aImg.length - 1;  //注:因为计算机从零开始数所以要减一
                    }
                    f1();  //调用f1函数
                };
            }else{
                oMlLeft.style.display = 'none';  //左指示消失
                oMlRight.style.display = 'none';  //右指示消失
            }
        };
        oMlBox.onmouseout = function () {  //当鼠标移出id:mlBox
            f2();  //调用f2函数
            oMlLeft.style.display = 'none';  //左指示消失
            oMlRight.style.display = 'none';  //右指示消失
        };
        function f2(){
            shut = setInterval(function () {  //定时器
                u++;  //每3秒当前位置加一
                if (u >= aImg.length) {  //当前位置大于等于照片的数量当前位置等于0
                    u = 0;
                }
                f1();  //调用f1函数
            },3000);
        }
        f2();  //调用f2函数
    }
</script>

  

 

作者:心存善念
本文地址:https://www.cnblogs.com/xcsn/p/4927633.html
欢迎转载,请在明显位置给出出处及链接。

posted @   心存善念  阅读(1007)  评论(0编辑  收藏  举报
编辑推荐:
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
阅读排行:
· DeepSeek V3 两周使用总结
· 回顾我的软件开发经历(1)
· C#使用yield关键字提升迭代性能与效率
· 低成本高可用方案!Linux系统下SQL Server数据库镜像配置全流程详解
· 4. 使用sql查询excel内容
点击右上角即可分享
微信分享提示