jQuery手机触屏滑动的响应式图片轮播效果

所属分类:媒体-幻灯片和轮播图

 51753  343  查看评论 (42)
分享到微信朋友圈
X
jQuery手机触屏滑动的响应式图片轮播效果 ie兼容10

响应式触摸滑块 Javascript/css3 滑块

HTML

  <div class='o-sliderContainer hasShadow' id="yourId">
    <div class='o-slider' id='pbSlider'>
      <div class="o-slider--item" data-image="images/5.jpg">
        <div class="o-slider-textWrap">
          <h1 class="o-slider-title">This is a title</h1>
          <span class="a-divider"></span>
          <h2 class="o-slider-subTitle">This is a sub title</h2>
          <span class="a-divider"></span>
          <p class="o-slider-paragraph">
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph </p>
        </div>        
      </div>
      <div class="o-slider--item" data-image="images/6.jpg">
        <div class="o-slider-textWrap">
          <h1 class="o-slider-title">This is a title</h1>
          <span class="a-divider"></span>
          <h2 class="o-slider-subTitle">This is a sub title</h2>
          <span class="a-divider"></span>
          <p class="o-slider-paragraph">
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph </p>
        </div>
      </div>
      <div class="o-slider--item" data-image="images/1.jpg">
        <div class="o-slider-textWrap">
          <h1 class="o-slider-title">This is a title</h1>
          <span class="a-divider"></span>
          <h2 class="o-slider-subTitle">This is a sub title</h2>
          <span class="a-divider"></span>
          <p class="o-slider-paragraph">
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph </p>
        </div>
      </div>
      <div class="o-slider--item" data-image="images/2.jpg">
        <div class="o-slider-textWrap">
          <h1 class="o-slider-title">This is a title</h1>
          <span class="a-divider"></span>
          <h2 class="o-slider-subTitle">This is a sub title</h2>
          <span class="a-divider"></span>
          <p class="o-slider-paragraph">
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph </p>
        </div>
      </div>
      <div class="o-slider--item" data-image="images/3.jpg">
        <div class="o-slider-textWrap">
          <h1 class="o-slider-title">This is a title</h1>
          <span class="a-divider"></span>
          <h2 class="o-slider-subTitle">This is a sub title</h2>
          <span class="a-divider"></span>
          <p class="o-slider-paragraph">
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph </p>
        </div>
      </div>
      <div class="o-slider--item" data-image="images/4.jpg">
        <div class="o-slider-textWrap">
          <h1 class="o-slider-title">This is a title</h1>
          <span class="a-divider"></span>
          <h2 class="o-slider-subTitle">This is a sub title</h2>
          <span class="a-divider"></span>
          <p class="o-slider-paragraph">
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph </p>
        </div>
      </div>
    </div>
  </div>

JAVASCRIPT

<script>
$('#pbSlider0').pbTouchSlider({
    slider_Wrap : '#yourId', // Assign a unique ID to the div.o-sliderContainer
    slider_Item : '.o-slider--item', // Single Item
    slider_Drag : true, // Your choise.. to dragIt or not to dragIt..this is the question...
    slider_Dots : { // Wanna see dots or not?
      class :'.o-slider-pagination',
      enabled : true
    },
    slider_Arrows : { // Wanna see Arrows or not?
      class :'.o-slider-arrows',
      enabled : true
    },
    slider_Threshold : 25, // Percentage of  dragX before go to next/prev slider
    slider_Speed : 1000,
    slider_Ease : 'cubic-bezier(0.5, 0, 0.5, 1)',  // see http://cubic-bezier.com/
    slider_Breakpoints : { // Kind of media queries ( can add more if you know how to do it :D and if you need )
        default : {
            height : 500 //  height on desktop
        },
        tablet : {
            height : 400, // height on tablet
            media : 1024 // tablet breakpoint
        },
        smartphone : {
            height : 300, // height on smartphone
            media : 768 // smartphone breakpoint
        }
    }
});
</script>

引用库

  • Hammer.js /单和多点触控手势库

  • Lea Verou - cubic-bezier /CSS3 的缓动功能

  • Daniel Bruce - entypo  /字体图标

  • jQuery / JS框架

相关插件-幻灯片和轮播图

基于jquery的轻量级无缝轮播插件(原创)

一款轻量级的无缝轮播插件,可根据浏览器大小自适应宽高。
  幻灯片和轮播图
 27822  232

jquery分层轮播插件jquery.zySlide

jquery实现分层轮播3d旋转效果
  幻灯片和轮播图
 38292  297

CSS3全屏3D画布图片切换特效

CSS3全屏3D画布图片切换特效是一款基于JS+CSS3实现的带左右按钮的控制全屏图片切换代码。
  幻灯片和轮播图
 19915  235

jq图文焦点广告轮播代码

jquery图文焦点广告轮播代码是一款jquery.nivo.slider.js图片插件制作图文焦点广告轮播代码。
  幻灯片和轮播图
 35643  385

讨论这个项目(42)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    蓝胖子 0
    2020/7/22 14:34:12
    如果图片资源是base64的数据,如何显示 回复
    上条当麻 0
    2019/9/27 16:00:30
    滚动到最后一个就不能滚动了 回复
    Vivian 0
    2019/9/14 17:59:43
    滚动到最后一张能从右边滑出第一张吗? 回复
    shmily. 0
    2019/8/21 17:27:45
    没有办法左滑动, 回复
    xxz888 0
    2019/7/4 16:38:13
    xxz888 0
    2019/7/4 16:16:53
    汉堡?? 0
    2019/1/18 11:03:49
    老哥,这个不能等我点击某个的事件时,在渲染html的轮播内容,这样内容渲染不出来啊 回复
    郝伟 0
    2018/9/27 11:02:12
    文字展示蛮炫的,下载了
        这个笑容,我来守护0
        2018/10/31 14:55:41
        请问可以兼容用rem单位写的轮播吗
    回复
    1007014448 0
    2018/8/21 16:21:00
    怎么设置自动播放呀
        西瓜0
        2018/8/23 8:50:22
        slider.js第264行//pbSlider.auto(); 把注释// 取消掉就可以自动轮播了。
        liz0
        2018/9/30 16:28:47
        移动电脑版通用
    回复
    1007014448 0
    2018/8/21 16:19:48
    看上去挺炫的哦 回复
取消回复