轮播图-bxslider

轮播图-bxslider,第1张

概述bxSlider下载+参数说明 “bxSlider”就是一款响应式的幻灯片js插件 bxSlider特性 充分响应各种设备,适应各种屏幕; 支持多种滑动模式,水平、垂直以及淡入淡出效果; 支持图片、视频以及任意html内容; 支持触摸滑动; 支持Firefox,Chrome,Safari,iOS,Android,IE7+ bxSlider使用方法: 加载jQuery库,加载bxSlider插件文件 @H_419_0@ @H_419_0@ bxSlIDer下载+参数说明

“bxSlIDer”就是一款响应式的幻灯片Js插件

bxSlIDer特性

充分响应各种设备,适应各种屏幕;

支持多种滑动模式,水平、垂直以及淡入淡出效果;

支持图片、视频以及任意HTML内容;

支持触摸滑动;

支持firefox,Chrome,Safari,iOS,AndroID,ie7+

bxSlIDer使用方法:

加载jquery库,加载bxSlIDer插件文件和相关CSS文件;

    <!-- bxSlIDer CSS file -->    <link href="jquery.bxslIDer.CSS" rel="stylesheet" />        <!-- jquery library -->    <script src="jquery-3.1.1.min.Js"></script>    <!-- bxSlIDer JavaScript file -->    <script src="jquery.bxslIDer.Js"></script>
VIEw Code

 

创建一个幻灯片区块:

    <ul class="bxslIDer">      <li><img src="images/pic1.jpg" /></li>      <li><img src="images/pic2.jpg" /></li>      <li><img src="images/pic3.jpg" /></li>      <li><img src="images/pic1.jpg" /></li>      <li><img src="images/pic2.jpg" /></li>    </ul>

 

加上bxSlIDer参数激活使用:

    <script>        $(document).ready(function() {            $(‘.bxslIDer‘).bxSlIDer({                mode: ‘horizontal‘,moveSlIDes: 1,slIDemargin: 40,infiniteLoop: true,slIDeWIDth: 660,minSlIDes: 3,maxSlIDes: 3,speed: 800,});        });    </script>
VIEw Code

 

bxSlIDer下载地址:官方下载

bxSlIDer下载地址:github下载

bxSlIDer具体参数:

参数 描述 默认值
mode 设置滑动模式,‘horizontal‘:水平,‘vertical‘:垂直,‘fade‘:淡入淡出 horizontal
speed 内容切换速度,数字,ms 500
startSlIDe 初始滑动位置,数字 0
randomStart 随机初始滑动位置 true
infiniteLoop 循环滑动,如果设置为true时,则到最后滑动位置时会切换到初始位置 true
easing 切换动画扩展,可以借助jquery Easing 动画效果扩展设置不同的切换动画效果 null
captions 设置显示图片标题,当滑动内容为图片时并设置属性Title,可以显示图片标题 false
vIDeo 支持视频,当设置为true时,需要jquery.fitvIDs.Js支持 false
pager 设置是否显示分页,设置为true时,会在滑动内容下方显示分页图标 true
controls 设置是否显示上一副和下一幅按钮 true
auto 设置是否自动滑动 false
pause 自动滑动时停留时间,数字,ms 4000
autoHover 当鼠标滑向滑动内容上时,是否暂停滑动 false
@H_419_0@ 总结

以上是内存溢出为你收集整理的轮播图-bxslider全部内容,希望文章能够帮你解决轮播图-bxslider所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1031044.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-23
下一篇 2022-05-23

发表评论

登录后才能评论

评论列表(0条)

保存