第八章 让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{
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>
浙公网安备 33010602011771号