Boostrap轮图片可以左右滑动
记得引用Boostrap的js和css
html代码:
<div id="Mycarousel" class="carousel slide col-md-12" data-ride="carousel" data-interval="4000" >
<!-- 底部的指示小圆点-->
<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/banner.png" width="100%" /> </div>
<div class="item">
<img src="img/banner.png" width="100%"/>
</div>
<div class="item ">
<img src="img/banner.png" width="100%"/>
</div>
</div> </div>
一个比较简单的方法是增加一个滑动手势js插件:hammer.js,网上有很多cdn调用地址,像//cdn.bootcss.com/hammer.js/2.0.8/hammer.min.js,我们在head中加载一下然后再通过javascript把swipe功能调用出来就可以了
关键的步骤来了,我们需要写一个javascript命令调用hammer.js中的swipe功能
<script>
$(function(){
var myElement= document.getElementById('Mycarousel')
var hm=new Hammer(myElement);
hm.on("swipeleft",function(){
$('#Mycarousel').carousel('next')
})
hm.on("swiperight",function(){
$('#Mycarousel').carousel('prev')
})
})
</script>
1.引用bootstrap的js方法,但是只能实现定时图片轮播
<div id="Mycarousel" class="carousel slide col-md-12" data-ride="carousel" data-interval="4000" >
<!-- 底部的指示小圆点-->
<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/banner.png" width="100%" />
</div>
<div class="item">
<img src="img/banner.png" width="100%"/>
</div>
<div class="item ">
<img src="img/banner.png" width="100%"/>
</div>
</div>
</div>
2.添加手势触摸轮播,引用hammer.js
<script src="js/hammer.min.js"></script>
3.添加js代码在script中
$(function(){
var myElement=document.getElementById('Mycarousel');
var hm=new Hammer(myElement);
hm.on("swipeleft",function(){
$('#Mycarousel').carousel('next');
})
hm.on("swiperight",function(){
$('#Mycarousel').carousel('prev');
})
});
Boostrap轮图片可以左右滑动的更多相关文章
- [js开源组件开发]js轮播图片支持手机滑动切换
js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...
- photoSlider-html5原生js移动开发轮播图-相册滑动插件
简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" hre ...
- jQuery左侧图片右侧文字滑动切换代码
分享一款jQuery左侧图片右侧文字滑动切换代码.这是一款基于jQuery实现的列表图片控制图片滑动切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div cla ...
- 基于jquery hover图片遮罩层滑动
分享一款基于jquery hover图片遮罩层滑动.这是一款仿腾讯课堂的鼠标悬停经过图片遮罩透明层滑动效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
- 让boostrap的图片轮播支持滑动效果
因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果. 然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有 ...
- 【微信小程序】获取轮播图当前图片下标、滑动展示对应的位数、点击位数展示对应图片
业务需求: 3个图片轮番播放,可以左右滑动,点击指示点可以切换图片 index.wxml: 这里使用小程序提供的<swiper>组件autoplay:自动播放interval:自动切换时 ...
- Android 上千张图片的列表滑动加载
一般项目中图片加载用的比较多的是ImageLoader 但是需求自己配置一些参数 上手有些复杂 对于手机图库中有上千张图片需要加载时 一个使用性能很好的库Glide可以解决 效果图如下 滑动非常流畅 ...
- Android随笔--使用ViewPager实现简单地图片的左右滑动切换
Android中图片的左右切换随处可见,今天我也试着查阅资料试着做了一下,挺简单的一个小Demo,却也发现了一些问题,话不多说,上代码~: 使用了3个xml文件作为ViewPager的滑动page,布 ...
- ionic3 slides轮播图手动滑动后无法自动播放问题
我们都知道Ionic3为我们提供了一套丰富易用的UI组件库,然而凡事是都有不完美之处,今天我们来看一下ionic3 slides组件在实现轮播功能时候的小问题. 先开UI小姐姐给到的3张美美哒效果图 ...
随机推荐
- deque
转自:https://www.cnblogs.com/LearningTheLoad/p/7450948.html deque双向开口可进可出的容器 我们知道连续内存的容器不能随意扩充,因为这样容易扩 ...
- ArrayList的底层实现
package zy809; public class myArrayList { /** 存放元素 */ private Object[] data;// 创建一个数组引用. /** 元素的个数 * ...
- Hbase思维导图之调优
- linux如何查看端口号被哪个进程占用
1.lsof -i:端口号 lsof(list open files) 2.netstat -tunlp |grep 端口号 t:tcp u:udp n:拒绝显示别名 l:仅显示listen的服务状态 ...
- JQuery基本过滤器
- 通过Cookie统计上次网页访问时间
servlet类: import java.io.IOException;import java.text.SimpleDateFormat;import java.util.Date; import ...
- Python Django CBV下的通用视图函数
ListView TemplateView DetailView 之前的代码实例基本上都是基于FBV的模式来撰写的,好处么,当然就是简单粗暴..正如: def index(request): retu ...
- Menu显示三个点,不显示内容
先说下menu的使用 首先自定义一个menu选项 <menu xmlns:android="http://schemas.android.com/apk/res/android&quo ...
- Java开发环境配置(5)--Web 服务器--Tomcat--安装过程遇到的问题
1.参考例子:--- 怎样安装配置tomcat 8_百度经验https://jingyan.baidu.com/article/ff42efa91132a0c19e220208.html 安装与配置T ...
- Redis protected-mode属性解读
redis3.2版本后新增protected-mode配置,默认是yes,即开启.设置外部网络连接redis服务,设置方式如下: 1.关闭protected-mode模式,此时外部网络可以直接访问 2 ...