伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】

所属分类:媒体-幻灯片和轮播图
 5667  17  查看评论 (0)
伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】 ie兼容8

全屏轮播图

该伟德BETVICTOR基于jquery开发,现阶段很多PC网站都需要用到轮播图切换的效果,很多时候要在页面中复用轮播图,而且对于PC用户而言,IE8+用户居多,需要做一个兼容该用户群体的全屏轮播图,同时也可以通过参数设置来把该幻灯片设置为非全屏复用多个位置。这时候该伟德BETVICTOR便应运而生。可以通过简单的调用及样式来对其进行调用,从而完成快速开发的过程。该模块并非只能是轮播图,轮播图条目区域可以放上文字列表、图片等任意内容,这块在于你自己选择。接下来对该伟德BETVICTOR进行一个

方法调用

现在对方法调用进行一个简单的解析,后面再就函数进行具体的解析。html<!-- 重置样式表,按自己需要重置,并非一定用这个。 --> <link rel="stylesheet" href="https://necolas.github.io/normalize.css/4.1.1/normalize.css"> <!-- 引入slide伟德BETVICTOR样式表 --> <link rel="stylesheet" href="../dist/css/full-screen-slide.min.css"> <!-- 调用demo --> <div class="slide-box-demo"> <div class="slide-box"> <!-- 轮播图主体模块 --> <div class="slide-con"> <div class="slide-out"> <div class="slide-li"> <div class="slide-li-content"> <div class="box" style="background: #ddd;color: #333;height: 600px">这里是文本存放位置</div> </div> </div> <div class="slide-li"><img src="../dist/images/slide/1.png" style="width: 100%" alt=""></div> <div class="slide-li"> <div class="slide-li-content"> <div class="box" style="background: #ccc;color: #333;height: 600px">这里是文本存放位置</div> </div> </div> </div> </div> <!-- 默认上一页下一页 --> <div class="slide-page"> <div class="slide-button-prev" id="slide-button-prev"><i></i></div> <div class="slide-button-next" id="slide-button-next"><i></i></div> </div> </div> </div> <!-- 引入jquery --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- 引入slide伟德BETVICTORjs文件 --> <script src="../dist/js/full-screen-slide.min.js"></script>js// 默认 $('.slide-box-demo').setSlide()参数解析
参数类型说明示例值
$(this)DOM当前轮播图($('.slide-box'))外层的包裹的DOM节点,可自定义标签,Dom节点操作沿袭jquery的Dom节点操作。详见demo$("#demo").setSlide()
isBlockboolean(非必填)定义幻灯片是否为块状展示该幻灯片。默认为falsetrue
fullScreenwboolean(非必填)宽度完全全屏,轮播图宽度为整个屏幕宽度。注意:当设置该参数为true时,slideLiw参数无效。默认为falsetrue
fullScreenhboolean(非必填)高度完全全屏,轮播图高度为整个屏幕高度。注意:当设置该参数为true时,slideLih参数无效。默认为falsetrue
switchingSpeednumber(非必填)定义轮播图切换速度的毫秒数。如若为空,默认自动播放时间为600毫秒800
slideTimenumber(非必填)定义轮播图自动播放的毫秒数,只有开启autoPlay属性时有效。如若为空,默认自动播放时间为3000毫秒2000
autoPlayboolean(非必填)是否自动切换,默认为falsetrue
prevElDOM(非必填)点击轮播图切换到上一张,可自定义标签,Dom节点操作沿袭jquery的Dom节点操作,默认为$('#slide-button-prev')。注意:如若使用默认标签,id只能单次调用。如果第一张操作时候便跳到最后一张。默认上一页样式:<div class="slide-page"><div class="slide-button-prev"><i></i></div></div>$('.slide-button-prev')
nextElDOM(非必填)点击轮播图切换到下一张,可自定义标签,Dom节点操作沿袭jquery的Dom节点操作,默认为$('#slide-button-next')。注意:如若使用默认标签,id只能单次调用。如果最后一张操作时候便跳到第一张。默认下一页样式:<div class="slide-page"><div class="slide-button-next"><i></i></div></div>$('.slide-button-prev')
paginationboolean(非必填)是否使用分页导航,只有开启autoPlay属性时有效。默认为falsetrue
pagingTriggerstring(非必填)分页导航指示器的触发事件,默认为click'hover'
slideLiwnumber(非必填)设定轮播容器宽度,默认单位为px,无需加单位。默认为12001000
slideLihnumber(非必填)设定轮播容器高度,默认单位为px,无需加单位。默认为600500
fnObject(非必填) 回调函数,可以在当轮播图切换时,拿到当前轮播图的索引值并在该时刻进行回调的操作。与一般函数写法相同,索引值可传可不传。function(index) {} 或 function() {}

demo演示

对于上面所做的解析,如果还有不明白的话,不用担心,就上面的参数提供了demo进行解析,让你快速开发你想要的轮播图。下面为相关demo的地址:
  • 默认调用 01-default
  • 上下页切换调用 02-navigation.html
  • 分页调用 03-pagination.html
  • 自动播放 04-autoplay.html
  • 自定义宽高 05-widthAndheightSetting.html
  • 块状展示 06-block-display.html
  • 宽高完全全屏 07-fullscreen.html
  • 回调函数 08-callback.html
相关伟德BETVICTOR-幻灯片和轮播图

原生js轮播图伟德BETVICTORImage Slider

原生js轮播图伟德BETVICTORImage Slider 提供8种轮播手机1946韦德最新网站,轻量级只有16k.
  幻灯片和轮播图
 13725  72

jQuery轮播伟德BETVICTOR(原创轮播)

代码注释全,方便大家自行修改的轮播伟德BETVICTOR
  幻灯片和轮播图
 13262  60

TinyBox JavaScript弹出脚本

TinyBox JavaScript弹出脚本
  幻灯片和轮播图
 11467  28

js轮播图伟德BETVICTORslider

支持鼠标滑动以及移动端手势滑动的幻灯片播放伟德BETVICTOR
  幻灯片和轮播图
 6439  68

讨论这个项目(0)回答他人问题或分享伟德BETVICTOR使用方法奖励jQ币

取消回复