首页
所有分类
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 相关文章推荐
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
node.js中的console.error方法使用说明
Dec 10 Javascript
js限制文本框的输入内容代码分享（3类）
Aug 20 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
Three.js基础部分学习
Jan 08 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
微信小程序如何实现全局重新加载
Jun 05 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
Mar 25 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
JSON(10) capture(1) css3 (2) MybatisPlus(2) MapReduce(1) SpringBoot(22) pycharm(6) Normal From(1) pyqt5(3) Qlabel(1)
You might like
PHP4引用文件语句的对比
2006/10/09 PHP
让你的网站首页自动选择语言转跳
2006/12/06 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
读jQuery之三（构建选择器）
2011/06/11 Javascript
自己实现string的substring方法 人民币小写转大写，数字反转，正则优化
2012/09/02 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
Vue使用高德地图搭建实时公交应用功能（地图 + 附近站点+线路详情 + 输入提示+换乘详情）
2018/05/16 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
详解Tensorflow数据读取有三种方式（next_batch）
2018/02/01 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
美国最大网上鞋店：Zappos
2016/07/25 全球购物
英国最大的专业户外零售商：Mountain Warehouse
2018/06/06 全球购物
党风廉政建设调研报告
2015/01/01 职场文书
预备党员个人总结
2015/02/14 职场文书
高一军训感想
2015/08/07 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书
Java基于字符界面的简易收银台
2021/06/26 Java/Android