首页
所有分类
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 相关文章推荐
Javascript 匿名函数及其代码模式原理
Mar 19 Javascript
javascript encodeURI和encodeURIComponent的比较
Apr 03 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
jquery validate demo 基础
Oct 29 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
canvas绘制环形进度条
Feb 23 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
Jun 02 Javascript
js实现随机点名器精简版
Jun 29 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
竞聘书(31) 意向书(73) 承诺书(369) 公证书(45) 委托书(259) 协议书(568) 担保书(46) 说明书(38) 聘任书(31) 检举信(8)
You might like
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
php的array_multisort()使用方法介绍
2012/05/16 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
PHP数字和字符串ID互转函数（类似优酷ID）
2014/06/30 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
JavaScript获得当前网页来源页面（即上一页）的方法
2015/04/03 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
使用vue-cli导入Element UI组件的方法
2018/05/16 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
Python实现计算最小编辑距离
2016/03/17 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
python web框架中实现原生分页
2019/09/08 Python
python中return如何写
2020/06/18 Python
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
小学教师师德感言
2014/02/10 职场文书
采购意向书范本
2014/03/31 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
大学辅导员述职报告
2015/01/10 职场文书
赢在执行观后感
2015/06/16 职场文书
升学宴家长致辞
2015/07/27 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
详细了解java监听器和过滤器
2021/07/09 Java/Android