Jquery图片滚动插件—BxCarousel-阿里云开发者社区

开发者社区> 橘子红了呐> 正文

Jquery图片滚动插件—BxCarousel

简介:
+关注继续查看

Jquery图片滚动插件—BxCarousel

Jquery图片滚动插件—BxCarousel

BxCarousel是一个具有众多配置且易用的Jquery图片滚动插件,特征主要有:

Ø  可以指定显示的元素数

Ø  可以指定每次滚动元素数

Ø  自动播放模式

Ø  前一张/后一张按钮控制图片流动

 

下面我看两个BxCarouselDemo

1、             DEMO One 控制左右滚动

Jquery代码

$(document).ready(function(){

         $('#example1').bxCarousel({

                 display_num: 4,

                 move: 2,

                 prev_image: 'images/icon_arrow_left.png',

                 next_image: 'images/icon_arrow_right.png',

                 margin: 10

         });

});

解释:

display_num:显示元素的数量,此处显示4张图片

move:单击左右控制键时,移动的元素个数,此处为移动2张图片

prev_image:上一元素按钮图片

next_image:下一元素按钮图片

margin:图片之间的间隙,此处为10px

HTML代码

<ul id="example1">

                <li><img src="images/pic_one.png" width="107" height="107" alt="Pic One" /></li>

                <li><img src="images/pic_two.png" width="107" height="107" alt="Pic Two" /></li>

                <li><img src="images/pic_three.png" width="107" height="107" alt="Pic Three" /></li>

                <li><img src="images/pic_four.png" width="107" height="107" alt="Pic Four" /></li>

                <li><img src="images/pic_five.png" width="107" height="107" alt="Pic Five" /></li>

                <li><img src="images/pic_six.png" width="107" height="107" alt="Pic Six" /></li>

                <li><img src="images/pic_seven.png" width="107" height="107" alt="Pic Seven" /></li>

            </ul>

 

2、             Demo Two 自动滚动效果

Jquery代码如下:

解释:

display_num:显示元素的数量,此处显示3张图片

move:单击左右控制键时,移动的元素个数,此处为移动1张图片

auto:自动滚动效果

controls:是否显示左右控制按钮,此处为false,表示不显示左右控制按钮

margin:图片之间的间隙,此处为10px

3、             BxCarousel使用和配置

首先HTML代码需要符合以下格式

Jquery代码需要符合以下格式

 

下载地址:http://bxcarousel.com/js/jquery.bxcarousel.min.js


本文转自灵动生活博客园博客,原文链接:http://www.cnblogs.com/ywqu/archive/2010/10/28/1863961.html ,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jquery插件制作 -- 2.图片走廊:gallery
  本文主要内容是讲解图片走廊-gallery的实现。   首先创建jquery.gallery.js的插件文件,构建程序骨架。 (function ($) {   $.fn.gallery = function () {     return this.
800 0
jquery判断div滚动条到底部
jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 属性,互联网上几乎搜素不到关于它的应用技巧,而我正好需要用到它。
1000 0
查看SQLSERVER内部数据页面的小插件Internals Viewer
查看SQLSERVER内部数据页面的小插件Internals Viewer 感觉internals viewer这个名字起得很好,内部查看。 这个小工具是我之前看园子里的某大侠转载的文章是看到的 文章地址: SQL Server2008存储结构之堆表、行溢出 http://www.
677 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
12077 0
JS导出PDF插件(支持中文、图片使用路径)
原文:JS导出PDF插件(支持中文、图片使用路径) 在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfmake,很好地解决了此问题。它的效果可以先到http://pdfmake.org/playground.html查看。
1758 0
jQuery 写的插件图片上下切换幻灯效果
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
588 0
查看SQLSERVER内部数据页面的小插件Internals Viewer
原文:查看SQLSERVER内部数据页面的小插件Internals Viewer 查看SQLSERVER内部数据页面的小插件Internals Viewer 感觉internals viewer这个名字起得很好,内部查看。
889 0
jquery实现图片上传前的预览
html代码   js代码 $("#uploadImage").on("change", function(){ // Get a reference to the fileList var files = !!this.
694 0
3404
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载