`
coosummer
  • 浏览: 15143 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

轮播效果,在手机上可以用手滑动轮播

阅读更多
html:
<div id="myCarousel" class="imageHead carousel slide">
  <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="http://www.runoob.com/wp-content/uploads/2014/07/slide1.png" alt="slide" class="image">
      <div class="carousel-caption">
      </div>
    </div>
    <div class="item">
      <img src="http://www.runoob.com/wp-content/uploads/2014/07/slide2.png" alt="slide" class="image">
      <div class="carousel-caption">
      </div>
    </div>
    <div class="item">
      <img src="http://www.runoob.com/wp-content/uploads/2014/07/slide3.png" alt="slide" class="image">
      <div class="carousel-caption">
      </div>
    </div>
  </div>
</div>

js:
$('#myCarousel').carousel({
  interval: 2500
}
                         );
$('#myCarousel').hammer().on('swipeleft', function(){
  $(this).carousel('next');
}
                            );
$('#myCarousel').hammer().on('swiperight', function(){
  $(this).carousel('prev');
}
                            );
$('#myCarousel').hammer().on('press', function(){
  $(this).carousel('pause');
}
                            );
$('#myCarousel').hammer().on('pressup', function(){
  $(this).carousel('cycle');
}
                            );

演示效果:http://www.jscssshare.com/#/sample/JcZQH9Br
分享到:
评论

相关推荐

    支持手机触摸屏左右滑动的js轮播效果代码

    今天个小伙伴们分享一个好东西,webApp轮播效果,支持手机上用手左右滑动的效果,因为手机的触摸事件和PC端用鼠标操作的事件是不同的,所以我就需要针对移动端的设备触摸事件做相应的轮播特效。大家可以去看下易迅的...

    layui.carousel轮播组件实现移动端手势左右滑动效果

    layui.carousel轮播组件实现移动端手势左右滑动效果

    全屏滑动轮播效果代码

    jQuery手机图片全屏滑动轮播效果代码,代码简洁明了,容易掌握

    jQuery左右滑动手风琴轮播切换特效

    手风琴(Accordion)效果和轮播(Carousel)切换是两种常见的jQuery插件,当它们结合在一起,可以创造出独特的滑动效果,使得用户可以在有限的空间内查看更多的内容。 首先,我们来理解一下手风琴效果。手风琴是一...

    Android实现轮播图Banner。包括自动播放,手动滑动。

    总之,Android中的轮播图实现主要依赖于`ViewPager`和自定义的适配器,通过配合自动播放的定时任务和滑动事件监听,可以实现用户友好、流畅的轮播效果。在实际项目中,开发者可以根据具体需求进行调整和优化,以实现...

    jQuery手机图片全屏滑动轮播效果代码.zip

    jQuery手机图片全屏滑动轮播效果代码是一款基于jquery.event.drag-1.5.min.js、 jquery.touchSlider.js和jquery-1.7.1.min.js等插件制作的图片轮播特效代码,兼容PC端和手机移动端,全屏宽屏 显示,支持鼠标点击切换...

    Android ViewPager实现左右循环滑动及轮播效果

    使用ImageLoader,开发者可以在适配器的`getView()`方法中加载图片,并确保在同一个ImageView上不会同时加载多张图片,避免内存和性能问题。 5. **实现步骤**: - 创建`PagerAdapter`子类,实现数据源的逻辑。 - ...

    jQuery全屏响应式手指滑动图片轮播代码

    1. 引入jQuery库:确保网页头部包含了jQuery库的链接,这样可以在页面上使用jQuery的功能。 2. CSS布局:设置轮播容器的样式,使其能够占据全屏,并为每张图片定义相应的CSS规则,使其能适应全屏显示。 3. 初始化...

    jQuery响应式手机端触屏滑动图片轮播插件

    在jQuery中,可以使用事件监听器来捕捉用户的触摸动作,如`touchstart`、`touchmove`和`touchend`,并通过这些事件来实现滑动效果。同时,需要处理滚动方向和防止默认的页面滚动行为,以保证用户操作的流畅性。 ...

    支持手机触摸滑动图片轮播

    在IT行业中,手机触摸滑动图片轮播是一种常见的交互设计,尤其在移动应用和网页设计中,用于展示图片集合或创建动态效果。本教程将详细解释如何实现这一功能,主要基于给定的压缩包文件“jquery-hdhdp”。 首先,...

    可以无限手动滑动和自动滚动的轮播图

    本文将深入探讨“可以无限手动滑动和自动滚动的轮播图”的实现方法及其相关知识点。 首先,轮播图的核心功能包括手动滑动和自动滚动。手动滑动允许用户通过点击或触摸箭头来切换图片;自动滚动则是指轮播图按照设定...

    安卓图片轮播广告轮播自动滚屏相关-完美的viewpager左右无限循环实现广告自动手动轮播效果。无BUG.rar

    综上所述,实现一个完美的图片轮播广告轮播效果,需要深入理解ViewPager的工作原理,巧妙地使用Adapter、PageTransformer、Handler以及生命周期管理。通过不断测试和优化,我们可以构建出一个无BUG、用户体验良好的...

    jQuery手指滑动轮播效果

    从给定的文件信息中,我们可以提取关于“jQuery手指滑动轮播效果”的一系列知识点,这些内容涉及到使用jQuery实现轮播效果的前端技术。 ### 知识点一:jQuery技术简介 jQuery是一个快速、小巧、功能丰富的...

    vue移动端轮播图(触摸滑动滚动、自动轮播、无缝滚动、循环无回滚)

    4. **循环无回滚**:当用户手动滑动轮播图时,如果滑动过快,可能导致图片切换回滚到错误的位置。通过合适的判断条件和状态管理,可以避免这种回滚现象,确保滑动的流畅性和准确性。 此外,为了提升用户体验,项目...

    漂亮的滑动触摸的jq轮播图有很多个

    2. **jQueryftxhdp1209201702052337**:可能是“jQuery Fixed Touch滑动”插件,专门优化了触摸设备的滑动体验,确保在手机和平板电脑上也能流畅操作。 3. **jQuery-banner2541201703062208**:这个插件可能专注于...

    轮播图手动循环滑动+自动循环滑动

    可以使用`translateX` CSS属性来平移整个轮播图容器,使得下一个面板出现在可视区域内。 3. 添加过渡效果:为了提高用户体验,可以添加过渡动画。这可以通过CSS的`transition`属性实现,设定适当的持续时间和动画...

    全屏轮播插件 兼容移动端滑动

    响应式设计是关键,通过使用媒体查询(Media Queries)来调整CSS样式,确保轮播在大屏桌面到小屏手机上都能保持良好的显示效果。此外,使用百分比单位而非固定像素可以提高布局的灵活性。 对于移动端的滑动支持,...

    良好的轮播效果

    在前端开发中,轮播效果是一种常见的网页交互设计,用于展示多张图片或内容,而“良好的轮播效果”正是这种需求的体现。本资源提供了一种使用JavaScript实现的优美轮播效果,对于想要提升网站用户体验的前端开发者来...

    四种 js 轮播效果

    在网页设计中,轮播效果是一种常见的视觉展示手段,它可以用来循环展示多张图片或内容,增强用户体验。本压缩包包含了四种不同的JS轮播效果实现,适合开发者参考学习或直接应用于项目。 1. **基础轮播效果**:这种...

    轮播图插件,支持手机移动端触屏滑动

    以下将详细介绍轮播图插件及其在手机移动端触屏滑动上的实现。 轮播图插件的核心功能是自动循环展示一组图片或内容,同时提供导航控制(如左右箭头)和分页指示器,让用户可以手动切换到不同的图片或内容。这种插件...

Global site tag (gtag.js) - Google Analytics