首页 > 编程技术 > js

【已验证】简单易用的jQuery内容滑动或渐变插件 - Basic jQuery Slider

发布时间:2013-9-3 20:06

 内容滑动插件能让你在有限的空间中展示更多的内容,给力技术之前也推荐过好几个这类插件,今天要推荐的也是一个内容滑动插件 - Basic jQuery Slider。

Basic jQuery Slider 是一个轻量级的很简洁的 jQuery 内容滑动插件,经压缩后也仅有4.6kb大小。它能用来展示文字、图片等任意的 HTML 内容。此插件并没有太多花哨的功能,仅包含一些基础的功能,实现了 fade 和 slide 两种动画切换效果。除了使用按钮的导航方式外,它还支持使用键盘控制。此插件最大的特点是支持自定义主题样式,完全可以打造出很漂亮的效果来。

使用方法:

首先在页面中引入 jQuery 和 Basic jQuery Slider插件

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://basic-slider.com/js/bjqs-1.3.min.js"></script>

这2个js都可以下载到本地,对应的官网是jquery.com,basic-slider.com
官网都有最新版的


 

以下添加所需要的HTML代码,ul必须设置class="bjqs"

<div id="slideshow">
    <ul class="bjqs">
        <li><!-- 任意内容 --></li>
    </ul>
</div>

最后初始化插件

$('#slideshow').bjqs({
        'width' : 940,
        'height' : 340,
        'showMarkers' : true,
        'showControls' : true,
        'centerMarkers' : false
    });


这个功能,本站亲自验证,看本站演示


实例代码下载: 下载

BTW:实现这一功能还有个常用的js插件 http://slidesjs.com/js/jquery.slides.min.js,具体的看slidesjs.com

标签:[!--infotagslink--]

您可能感兴趣的文章: