素材牛VIP会员

可加入视频、图片的轮播swiper插件(可以拖动、视频存在加载条)

 所属分类:网页特效-焦点图/幻灯片,音乐视频

 浏览:5665次  评论:3次  更新时间:2018-12-05
牛币素材VIP可免积分下载
可加入视频、图片的轮播swiper插件(可以拖动、视频存在加载条)兼容IE9
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:可以拖拽实现切换图片,可以将图片和视频一起实现滑动。视频存在进度条,进度条完毕,实现切换

详细介绍

使用方法

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
        }
    }
  });

文件目录结构

  • css
    • ┝ style.css
  • icons
    • ┝ entypo.css
    • ┝ entypo.eot
    • ┝ entypo.svg
    • ┝ entypo.ttf
    • ┝ entypo.woff
  • images
    • ┝ 1.png
    • ┝ 2.png
    • ┝ 3.png
    • ┝ 4.png
    • ┝ mp4_video_1.3gp
  • ┝ index.html
  • js
    • ┝ hammer.js
    • ┝ hammer.min.js
    • ┝ jquery-3.2.0.min.js
    • ┝ slider.js
    • ┝ slider.min.js
  • sass
    • inc
      • ┝ _animation.scss
      • ┝ _base.scss
      • ┝ _loader.scss
      • ┝ _mixin.scss
      • ┝ _variables.scss
    • ┝ style.scss

相关素材 - 焦点图/幻灯片,音乐视频

讨论这个素材(3)回答他人问题或分享使用心得会奖励牛币

Go***pp  
2019年05月28日

视频自带的音频 在哪调 亲

素材牛:这一行就是,替换即可:<source src="images/mp4_video_1.3gp" type="video/mp4">
回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:10 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)