可拖动的轮播插件(视频存在进度条,swiper插件)

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

 38037  372  查看评论 (13)
分享到微信朋友圈
X
可拖动的轮播插件(视频存在进度条,swiper插件) ie兼容9

使用方法

css引用:

<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="icons/entypo.css">

html:

<div class='o-sliderContainer' id="pbSliderWrap0" >
<!-- 视频: -->
 <div class='o-slider' id='pbSlider0'>
<div >
<video class='video'  autoplay muted loop >
<source src="images/Rallye.3gp" type="video/mp4">
</video>
<div >
<h1 >这是一个视频</h1>
<span ></span>
<h2 >自动播放</h2>
<span ></span>
<p >存在进度条 
</div>
   </div>
<!-- 图片: -->
   <div  data-image="images/1.jpg">
<div >
<h1 >这是图片</h1>
<span ></span>
<h2 >图片放data-image</h2>
<span ></span>
<p >6秒滑动
</div>
   </div>
     <div ></div>
</div>
</div>

js引用:

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src='js/hammer.min.js'></script>
<script src='js/slider.js'></script>

js:

$('#pbSlider0').pbTouchSlider({
    slider_Wrap: '#pbSliderWrap0',
    slider_Threshold: 10,
    slider_Speed:600,
    slider_Ease:'ease-out',
    slider_Drag : true,//拖动
		auto:true,//是否自动滚动
		autoTime:6000,//设置图片自动时间
    slider_Arrows: {
      enabled : true//箭头
    },
    slider_Dots: {//显示点不
      class :'.o-slider-pagination',
      enabled : true,
      preview : false
    },
    slider_Breakpoints: {
        default: {
            height: 700//高度
        },
        tablet: {
            height: 500,
            media: 1024
        },
        smartphone: {//智能手机高度
            height: 400,
            media: 768
        }
    }
  });
相关插件-幻灯片和轮播图

易迅分块jquery焦点图

上下切换、分块展示
  幻灯片和轮播图
 26540  304

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

jQuery响应式图片插件,多种图片滑动轮播切换,兼容手机端的触屏滑动图片切换代码。
  幻灯片和轮播图
 63772  475

jQuery仿锤子轮播图加视差效果

一款利用css3和Jquery写的酷炫焦点图。
  幻灯片和轮播图
 29811  390

jQuery轮播图加时间轴插件

jQuery轮播图加时间轴插件,简单实用。
  幻灯片和轮播图
 30633  414

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

    待定 0
    2024/1/31 11:30:20
    2K分辨率和4K分辨率如何设置banner高度 回复
    zhang8678 0
    2022/12/21 17:09:06
    如何去掉加载动画呢
    回复
    htycode 0
    2022/6/25 10:44:28
    66666666666666666666666 回复
    TvT。 0
    2021/6/24 10:32:22
    加载有延迟是因为视频太大了嘛?
    回复
    智泰_王恩舜 0
    2021/5/12 10:20:28
    有的时候加载不出来额。。有的时候又能加载出来。。。作者能帮忙看下吗
        西瓜0
        2021/5/12 11:26:47
        这个原因你要自己查才好,在加载不出来时看看请求资源是否正常。
    回复
     天涯孤客 0
    2021/4/16 11:37:04
    孙策【定胜网络】 0
    2019/7/17 11:10:43
    abaoaaa 0
    2019/4/11 23:05:53
    Mars 0
    2019/3/13 15:19:57
    怎么让视频有声音
    回复
    Mars 0
    2019/3/13 14:44:28
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复