[err:标签'取得节点名称带链接'模板转换错误,原因:扩展函数不能返回空值。]

开发攻略

您的位置:首页>建站攻略>开发攻略>详细内容

开发攻略

jQuery响应式幻灯片插件jquery.glide.js(支持触摸&轻量级)

录入: 发布时间:2020年05月07日 已阅读: 【字体: 保护视力色:

找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件。 jquery.glide.js是响应和触摸友好的jQuery的滑块插件,基于CSS3也支持较老的浏览器。

jquery.glide.js功能介绍

  • 轻量级压缩过后的js 仅 〜4.5 KB左右
  • 超快速CSS3过渡,对移动设备的友好支持
  • 响应式布局 它适用于智能手机,平板电脑和台式机。
  • 支持API回调,支持键盘导航
  • 构造布局简单,没有多余的代码,要多简单就多简单

如何使用jquery.glide.js

STEP1 引入jQuery

[html]<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
[/html]

STEP2 使用 jquery.glide.js

[html]<script src="jquery.glide.js"></script>
[/html]

STEP3 头部加入glide的样式表

[html]<link rel="stylesheet" type="text/css" href="css/style.css">
[/html]

必要的HTML标记

[html]<div class="slider">
<ul class="slides">
<li class="slide"></li>
<li class="slide"></li>
<li class="slide"></li>
</ul>
</div>
[/html]

初始化插件

初始化插件的默认选项(基础篇):

[js]//就这么简单 一个简单的幻灯片滑块就出来啦!
$(‘.slider’).glide();
[/js]

高级选项:

[js]var glide = $(‘.slider’).glide({

//autoplay:true,//是否自动播放 默认值 true如果不需要就设置此值
animationTime:500, //动画过度效果,只有当浏览器支持CSS3的时候生效

arrows:true, //是否显示左右导航器
arrowsWrapperClass: "arrowsWrapper",//滑块箭头导航器外部DIV类名
arrowMainClass: "slider-arrow",//滑块箭头公共类名
arrowRightClass:"slider-arrow–right",//滑块右箭头类名
arrowLeftClass:"slider-arrow–left",//滑块左箭头类名
arrowRightText:"&gt;",//定义左右导航器文字或者符号也可以是类
arrowLeftText:"&lt;",

nav:true, //主导航器也就是本例中显示的小方块
navCenter:true, //主导航器位置是否居中
navClass:"slider-nav",//主导航器外部div类名
navItemClass:"slider-nav__item", //本例中小方块的样式
navCurrentItemClass:"slider-nav__item–current" //被选中后的样式
});
[/js]

 

例子:

    <div style="width: 100%;padding-top: 52px;" class="hidden-md hidden-lg"></div>
    <!-- 轮播图开始 -->
    <div class="mainbanner">
        <div class="slider">
            <ul class="slides">
                <li class="slide"><a><img src="images/banner.jpg" alt="演示图片一" style="width: 100%;"></a>
                </li>
                <li class="slide"><a><img src="images/banner2.jpg" alt="演示图片二" style="width: 100%;"></a>
                </li>
                <li class="slide"><a><img src="images/banner3.jpg" alt="演示图片三" style="width: 100%;"></a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 轮播图结束 -->
    <!-- jquery.glide.min banner滚动轮播 -->
    <script type="text/javascript" src="style/js/jquery.glide.min.js"></script>
    <!-- 轮播图js -->
    <script>
        //roll banner
        var glide = $('.slider').glide({
            //autoplay:true,//是否自动播放 默认值 true如果不需要就设置此值
            animationTime:500, //动画过度效果,只有当浏览器支持CSS3的时候生效
            arrows:true, //是否显示左右导航器
            arrowsWrapperClass: "arrowsWrapper container",//滑块箭头导航器外部DIV类名
            arrowMainClass: "slider-arrow",//滑块箭头公共类名
            arrowRightClass:"slider-arrow--right",//滑块右箭头类名
            arrowLeftClass:"slider-arrow--left",//滑块左箭头类名
            arrowRightText:"",//定义左右导航器文字或者符号也可以是类
            arrowLeftText:"",
            nav:true, //主导航器也就是本例中显示的小方块
            navCenter:true, //主导航器位置是否居中
            navClass:"slider-nav",//主导航器外部div类名
            navItemClass:"slider-nav__item", //本例中小方块的样式
            navCurrentItemClass:"slider-nav__item--current" //被选中后的样式
        });
    </script>
    <!-- 轮播图js -->
    <div class="clear"></div>

对应的css如下:

/* Glide styles | Here are slider styles | banner滚动轮播插件的个性样式,需要配合jquery.glide.min.js使用 */
.mainbanner{ width: 100%; height:auto; font-size: 0px; }
.mainbanner ul,.mainbanner ul li{ list-style: none; margin: 0; padding: 0; font-size: 0; display: block; }
.mainbanner ul li{ float: left; }
.slider { position: relative; width: 100%; height: auto; overflow: hidden; }
.slides { height: auto; /* Simple clear fix */ overflow: hidden; /**    * Prevent blinking issue * Not tested. Experimental. */ -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; /** * Here is CSS transitions * responsible for slider animation in modern broswers */ -webkit-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); -moz-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); -ms-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); -o-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); }
.slide { list-style: none; height: auto; float: left; clear: none; }
.arrowsWrapper{display:none;}
.slider:hover .arrowsWrapper{display:block}
.slider-arrow { position: absolute; display: block; margin-bottom: 0px; width: 6%;padding: 3%; text-decoration: none; text-align: center; opacity:1; }
.slider-arrow--right { bottom: 47.5%; right: 10%; background:url(img/right_jt.png) no-repeat center; background-size: 100%; } .slider-arrow--left { bottom: 47.5%; left: 10%; background:url(img/left_jt.png) no-repeat center; background-size: 100%; }
.slider-nav { position: absolute; bottom: 8%; text-align: center; }
.slider-nav__item { width: 60px; height: 6px; background: #2b7e76; border: none; border-radius: 0%; clear: none; display: inline-block; margin: 0 4px; }
.screen-phone .slider-nav__item {width: 25px;height: 5px;}
.slider-nav__item:hover,.slider-nav__item--current {background: #fff;}

 

文件下载

【打印正文】