首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery bxCarousel实现图片滚动切换效果示例代码

Posted in Javascript onMay 15, 2013

BxCarousel是一个具有众多配置且易用的Jquery图片滚动插件，特征主要有：
◆ 可以指定显示的元素总数
◆ 可以指定每次滚动的元素个数
◆ 自动播放模式
◆ 前一张/后一张按钮控制图片流动
参数含义：
display_num：显示元素的数量，几张图片
move：单击左右控制键时，移动的元素个数，此处为移动2张图片
prev_image：上一元素按钮图片
next_image：下一元素按钮图片
margin：图片之间的间隙，一般设为10px
auto:自动滚动效果
controls：是否显示左右控制按钮，此处为false,表示不显示左右控制按钮
auto_hover：鼠标悬停到轮播区域时，是否停止图片轮播
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 
}); 
});

div.bx_container和div.bx_wrap等html元素是js生成加上的，在使用bxCarousel插件时，为了达到视觉美感，要记得为div.bx_container和div.bx_wrap及其内部子元素设定需要的CSS Style。
还有注意的是，
bxCarousel是个无限循环机制，不停的点击next按钮看看html发生了什么变化！！
bxCarousel不只针对图片，对其他任何html元素均起作用。
如果开启auto属性，注意一定要保证speed属性值小于持续时间。
实例代码： 
<!DOCTYPE html> 
<html> 
<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" > 
<title></title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="js/bxCarousel.js"></script> 
<script type="text/javascript"> 
jQuery(function(){ 
jQuery('#demo1').bxCarousel({ 
display_num: 4, // 
move: 1, 
auto: true, 
controls: false, //此处为false,表示不显示左右箭头控制按钮 
margin: 10, 
auto_hover: true //鼠标悬停到轮播区域时，是否停止图片轮播 
}); 
jQuery('#demo2').bxCarousel({ 
display_num: 4, 
move: 4, 
margin: 10 
}); 
}); 
</script> 
<script type="text/javascript" src="./video/js/mootools.js"></script> 
<script type="text/javascript" src="./video/js/swfobject.js"></script> 
<script type="text/javascript" src="./video/js/videobox.js"></script> 
<link rel="stylesheet" type="text/css" href="./video/css/videobox.css" > 
<style type="text/css"> 
.pic, .vd{ 
width:200px; 
height:200px; 
margin:0 auto; 
} 
.pic a, .vd a{ 
display:block; 
width:200px; 
height:200px; 
text-align:center; 
margin:0 auto; 
} 
.pic{ 
background:url("http://i0.sinaimg.cn/home/2013/0513/U2727P30DT20130513082202.jpg") no-repeat scroll 0 0 transparent; 
} 
.vd{ 
background:url("http://i0.sinaimg.cn/home/2013/0512/U1345P30DT20130512114119.jpg") no-repeat scroll 0 0 transparent; 
} 
.nav,.main,.imgcollc ,.footer{ 
width:910px; 
margin:0 auto; 
text-align:center; 
} 
/*如果要使用方向按钮导航，则需要设置.bx_wrap a.prev和.bx_wrap a.next的样式。*/ 
a {color: #424242;text-decoration: none;} 
ul,li,ol{padding:0;margin:0;list-style:none;} 
.bx_wrap {margin-left: 30px; margin-top:10px;} 
.bx_wrap ul img { border: 2px solid #ddd; } 
.bx_wrap ul li{text-align:center;float:left;width:140px;height:119px;overflow:hidden;} 
.bx_wrap ul li a:hover{text-decoration:none; color:#f30;} 
.bx_wrap a.prev {width:20px;height:24px;line-height:24px;outline-style:none;outline-width: 0; position:absolute; top:45px; left:5px; text-indent:-999em; background: url(img/arr_left.gif) no-repeat;} 
.bx_wrap a.next {width:20px;height:24px;line-height:24px; left:623px;position: absolute; top:45px; text-indent:-999em; background:url('img/arr_right.gif') no-repeat;} 
.demo {width: 650px;height: 134px;margin: 40px auto;position: relative;border: 1px solid #d3d3d3;overflow:hidden; 
} 
</style> 
</head> 
<body> 
<div class="nav"> </div> 
<div class="main"> 
<h2 class="top_title"><a href="http://www.feiliu.com/">jQuery实现的视频窗口伸缩、图片滚动切换效果</a></h2> 
<div class="pic"> 
<a onfocus="blur()" id="img" href="http://imgsrc.baidu.com/forum/pic/item/ed178044ad345982578b3fa90cf431adcaef84d7.jpg" rel="vidbox 640 376" title="test jpg"></a> 
</div> 
<div class="vd"> 
<a onfocus="blur()" id="vd" href="http://www.novelstudios.com/media/Visions_CellPhone.mov" rel="vidbox 640 376" title="test video"></a> 
</div> 
</div> 
<div class="imgcollc"> 
<div class="demo"> 
<ul id="demo1"> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s1.jpg"><br/>图片1</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s2.jpg"><br/>图片2</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s3.jpg"><br/>图片3</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s4.jpg"><br/>图片4</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s5.jpg"><br/>图片5</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s6.jpg"><br/>图片6</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s7.jpg"><br/>图片7</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s1.jpg"><br/>图片1</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s2.jpg"><br/>图片2</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s3.jpg"><br/>图片3</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s4.jpg"><br/>图片4</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s5.jpg"><br/>图片5</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s6.jpg"><br/>图片6</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s7.jpg"><br/>图片7</a></li> 
</ul> 
</div> 
<div class="demo"> 
<ul id="demo2"> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s1.jpg"><br/>图片1</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s2.jpg"><br/>图片2</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s3.jpg"><br/>图片3</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s4.jpg"><br/>图片4</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s5.jpg"><br/>图片5</a></li> 
<li><a href="#"><img alt="#" width="140" height="94" src="img/s6.jpg"><br/>图片6</a></li> 
</ul> 
</div> 
</div> 
<div class="footer">Mobile</div> 
</body> 
</html>

本实例中同时实现了灯箱效果。由于采用videobox插件，对于图片和视频都支持。很多灯箱效果的脚本和插件，比如jQuery Lightbox Plugin，Videobox， MooslideBox,，Shadowbox和 LightWindow 等等。
Videobox是一个只有6k大小的脚本,用于在页面中显示视频。Videobox使用swfobject来嵌入Flash。视频可以来自Youtube、Metacafe、Google Video、iFilm和自己设置的Flash。如果你要达到效果，必须使用videobox.js,mootools.js和swfobject脚.js这个三个脚本。

类似滚动滑动的插件还有bxSlider 等等，bxSlider是一个 jQuery 的插件，它可以实现 Slider 和滚动效果。这个插件使用非常简单，并且大小只有 8kb，非常轻量级，所以非常适合在站点和博客中使用。

jQuery bxCarousel实现图片滚动切换效果示例代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
Mar 22 Javascript
图片Slider 带左右按钮的js示例
Aug 30 Javascript
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 Javascript
jQuery简单实现title提示效果示例
Aug 01 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
解决vue项目运行npm run serve报错的问题
Oct 26 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
May 15 #Javascript
JQuery的AJAX实现文件下载的小例子
May 15 #Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 #Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
May 15 #Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 #Javascript
JQuery for与each性能比较分析
May 14 #Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 #Javascript
JAVA面试题(401) C#面试题(90) Oracle面试题(81) C++面试题(199) LINUX面试题(83) Android面试题(6) 软件测试工程师面试题(53) DB面试题(126) .NET面试题(131) 网络工程师面试题(96)
You might like
PHP 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
php calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
简单了解vue中父子组件如何相互传递值（基础向）
2019/07/12 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
记录微信小程序 height: calc(xx - xx)；无效问题
2019/12/30 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
Python中的fileinput模块的简单实用示例
2015/07/09 Python
深入浅出学习python装饰器
2017/09/29 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
StubHub智利：购买和出售您的门票
2016/11/23 全球购物
房地产销售员的自我评价分享
2013/12/04 职场文书
新三好学生主要事迹
2014/01/23 职场文书
保险公司晨会主持词
2014/03/22 职场文书
助学感谢信范文
2015/01/21 职场文书
抖音动画片，皮皮虾，《治愈系》动画在用这首REMIX作为背景音乐，Anak ，The last world with you完整版
2022/03/16 杂记