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

开发者社区> 余二五> 正文

Jquery图片滚动插件—BxCarousel

简介:
+关注继续查看

 

Jquery图片滚动插件—BxCarousel
BxCarousel是一个具有众多配置且易用的Jquery图片滚动插件,特征主要有:
Ø 可以指定显示的元素数
Ø 可以指定每次滚动元素数
Ø 自动播放模式
Ø 前一张/后一张按钮控制图片流动
 
下面我看两个BxCarousel的Demo
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代码如下:

$(document).ready(function(){
         $('#example2').bxCarousel({
                 display_num: 3,
                 move: 1,
                 auto: true,
                 controls: false,
                 margin: 10,
                 auto_hover: true
         });
});

解释:
display_num:显示元素的数量,此处显示3张图片
move:单击左右控制键时,移动的元素个数,此处为移动1张图片
auto:自动滚动效果
controls:是否显示左右控制按钮,此处为false,表示不显示左右控制按钮
margin:图片之间的间隙,此处为10px
3、             BxCarousel使用和配置
首先HTML代码需要符合以下格式

<ul>
         <li>first piece of content</li>
         <li>second piece of content</li>
         <li>third piece of content</li>
         <li>fourth piece of content</li>
         <li>bxCarousel can accept an unlimited number of elements</li>
</ul>

Jquery代码需要符合以下格式

$(document).ready(function(){
         $('ul').bxCarousel({
                 display_num: 4,       // number of elements to be visible
                 move: 4,              // number of elements to the shift the slides
                 speed: 500,           // number in milliseconds it takes to finish slide animation
                 margin:0,             // right margin to be applied to each <li> element (in pixels, although do not include "px")
                 auto: false,          // automatically play slides without a user click
                 auto_interval: 2000, // the amount of time in milliseconds between each auto animation
                 auto_dir: 'next',     // direction of auto slideshow (options: 'next', 'prev')
                 auto_hover: false,    // determines if the slideshow will stop when user hovers over slideshow
                 next_text: 'next',    // text to be used for the 'next' control
                 next_image: '',       // image to be used for the 'next' control
                 prev_text: 'prev',    // text to be used for the 'prev' control
                 prev_image: '',       // image to be used for the 'prev' control
                 controls: true        // determines if controls will be displayed
         });
});

 









本文转自 灵动生活 51CTO博客,原文链接:http://blog.51cto.com/smartlife/457916,如需转载请自行联系原作者

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

相关文章
jquery插件制作 -- 2.图片走廊:gallery
  本文主要内容是讲解图片走廊-gallery的实现。   首先创建jquery.gallery.js的插件文件,构建程序骨架。 (function ($) {   $.fn.gallery = function () {     return this.
800 0
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
8478 0
jquery判断div滚动条到底部
jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 属性,互联网上几乎搜素不到关于它的应用技巧,而我正好需要用到它。
1000 0
查看SQLSERVER内部数据页面的小插件Internals Viewer
查看SQLSERVER内部数据页面的小插件Internals Viewer 感觉internals viewer这个名字起得很好,内部查看。 这个小工具是我之前看园子里的某大侠转载的文章是看到的 文章地址: SQL Server2008存储结构之堆表、行溢出 http://www.
677 0
JS导出PDF插件(支持中文、图片使用路径)
原文:JS导出PDF插件(支持中文、图片使用路径) 在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfmake,很好地解决了此问题。它的效果可以先到http://pdfmake.org/playground.html查看。
1758 0
分享22款响应式的 jQuery 图片滑块插件
  响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验。这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助你在 Web 项目中实现有吸引力的图片滑块效果。
1109 0
推荐几款jquery图片切换插件
一、前言   毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式、各种姿势都涌现出来了。这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利用静态网页的形式进行展示。
695 0
jQuery 写的插件图片上下切换幻灯效果
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
588 0
jquery实现图片上传前的预览
html代码   js代码 $("#uploadImage").on("change", function(){ // Get a reference to the fileList var files = !!this.
694 0
+关注
20382
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载