第八章 让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

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

<style>
        #mlBox{
             600px;
            height: 500px;
            position: relative;
            margin: 50px auto;
            border: 1px #ececec solid;
        }
        #mlImg{
             600px;
            height: 500px;
        }
        #mlImg img{
             600px;
            height: 500px;
            display: none;
        }
        #mlSpan{
             auto;
            height: 10px;
            position: absolute;
            left: 50%;
            bottom: 20px;
        }
        #mlSpan span{
            display: block;
            float: left;
             10px;
            height: 10px;
            background: cornflowerblue;
            border-radius: 50%;
            margin: 0 2px;
            z-index: 100;
        }
        #mlImg #mlShow{
            display: block;
        }
        #mlSpan #mlOn{
            background: chartreuse;
        }
        #mlLeft{
             30px;
            height: 30px;
            background: rgba(51,51,51,0.7);
            position: absolute;
            left: 0;
            top: 50%;
            display: none;
        }
        #mlLeft img{
             30px;
            height: 30px;
            display: block;
        }
        #mlRight img{
             30px;
            height: 30px;
            display: block;
        }
        #mlRight{
             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>