BxCarousel是一个具有众多配置且易用的Jquery图片滚动插件特征主要有
◆ 可以指定显示的元素总数
◆ 可以指定每次滚动的元素个数
◆ 自动播放模式
◆ 前一张/后一张按钮控制图片流动
参数含义
display_num显示元素的数量几张图片
move单击左右控制键时移动的元素个数此处为移动张图片
prev_image上一元素按钮图片
next_image下一元素按钮图片
margin图片之间的间隙一般设为px
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:
// number of elements to be visible
move:
// number of elements to the shift the slides
speed:
// number in milliseconds it takes to finish slide animation
margin:
// 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:
// 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
});
});
divbx_container和divbx_wrap等html元素是js生成加上的在使用bxCarousel插件时为了达到视觉美感要记得为divbx_container和divbx_wrap及其内部子元素设定需要的CSS Style
还有注意的是
bxCarousel是个无限循环机制不停的点击next按钮看看html发生了什么变化！！
bxCarousel不只针对图片对其他任何html元素均起作用
如果开启auto属性注意一定要保证speed属性值小于持续时间
实例代码
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf
" http
equiv="Content
Type" >
<title></title>
<script type="text/javascript" src="
<script type="text/javascript" src="js/bxCarousel
js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery(
#demo
)
bxCarousel({
display_num:
//
move:
auto: true
controls: false
//此处为false
表示不显示左右箭头控制按钮
margin:
auto_hover: true //鼠标悬停到轮播区域时
是否停止图片轮播
});
jQuery(
#demo
)
bxCarousel({
display_num:
move:
margin:
});
});
</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:
px;
height:
px;
margin:
auto;
}
pic a
vd a{
display:block;
width:
px;
height:
px;
text
align:center;
margin:
auto;
}
pic{
background:url("
}
vd{
background:url("
}
nav
main
imgcollc
footer{
width:
px;
margin:
auto;
text
align:center;
}
/*如果要使用方向按钮导航
则需要设置
bx_wrap a
prev和
bx_wrap a
next的样式
*/
a {color: #
;text
decoration: none;}
ul
li
ol{padding:
;margin:
;list
style:none;}
bx_wrap {margin
left:
px; margin
top:
px;}
bx_wrap ul img { border:
px solid #ddd; }
bx_wrap ul li{text
align:center;float:left;width:
px;height:
px;overflow:hidden;}
bx_wrap ul li a:hover{text
decoration:none; color:#f
;}
bx_wrap a
prev {width:
px;height:
px;line
height:
px;outline
style:none;outline
width:
; position:absolute; top:
px; left:
px; text
indent:
em; background: url(img/arr_left
gif) no
repeat;}
bx_wrap a
next {width:
px;height:
px;line
height:
px; left:
px;position: absolute; top:
px; text
indent:
em; background:url(
img/arr_right
gif
) no
repeat;}
demo {width:
px;height:
px;margin:
px auto;position: relative;border:
px solid #d
d
d
;overflow:hidden;
}
</style>
</head>
<body>
<div class="nav">
</div>
<div class="main">
<h
class="top_title"><a href="实现的视频窗口伸缩
图片滚动切换效果</a></h
>
<div class="pic">
<a onfocus="blur()" id="img" href="
</div>
<div class="vd">
<a onfocus="blur()" id="vd" href="
</div>
</div>
<div class="imgcollc">
<div class="demo">
<ul id="demo
">
<li><a href="#"><img alt="#" width="
" height="
" src="img/s
jpg"><br/>图片
</a></li>
<li><a href="#"><img alt="#" width="
" height="
" src="img/s
jpg"><br/>图片
</a></li>
<li><a href="#"><img alt="#" width="
" height="
" src="img/s
jpg"><br/>图片
</a></li>
<li><a href="#"><img alt="#" width="
" height="
" src="img/s
jpg"><br/>图片
</a></li>
<li><a href="#"><img alt="#" width="
" height="
" src="img/s
jpg"><br/>图片
</a></li>
<li><a href="#"><img alt="#" width="
" height="
" src="img/s
jpg"><br/>图片
</a></li>
<li><a href="#"><img alt="#" width="
" height="
" src="img/s
jpg"><br/>图片
</a></li>
<li><a href="#"><img alt="#" width="
" height="
" src="img/s
jpg"><br/>图片
</a></li>
<li><a href="#"><img alt="#" width="
" height="
" src="img/s
jpg"><br/>图片
</a></li>
<li><a href="#"><img alt="#" width="
" height="
" src="img/s
jpg"><br/>图片
</a></li>
<li><a href="#"><img alt="#" width="
" height="
" src="img/s
jpg"><br/>图片
</a></li>
<li><a href="#"><img alt="#" width="
" height="
" src="img/s
jpg"><br/>图片
</a></li>
<li><a href="#"><img alt="#" width="
" height="
" src="img/s
jpg"><br/>图片
</a></li>
<li><a href="#"><img alt="#" width="
" height="
" src="img/s
jpg"><br/>图片
</a></li>
</ul>
</div>
<div class="demo">
<ul id="demo
">
<li><a href="#"><img alt="#" width="
" height="
" src="img/s
jpg"><br/>图片
</a></li>
<li><a href="#"><img alt="#" width="
" height="
" src="img/s
jpg"><br/>图片
</a></li>
<li><a href="#"><img alt="#" width="
" height="
" src="img/s
jpg"><br/>图片
</a></li>
<li><a href="#"><img alt="#" width="
" height="
" src="img/s
jpg"><br/>图片
</a></li>
<li><a href="#"><img alt="#" width="
" height="
" src="img/s
jpg"><br/>图片
</a></li>
<li><a href="#"><img alt="#" width="
" height="
" src="img/s
jpg"><br/>图片
</a></li>
</ul>
</div>
</div>
<div class="footer">Mobile</div>
</body>
</html>
本实例中同时实现了灯箱效果由于采用videobox插件对于图片和视频都支持很多灯箱效果的脚本和插件比如jQuery Lightbox PluginVideobox MooslideBoxShadowbox和 LightWindow 等等
Videobox是一个只有k大小的脚本用于在页面中显示视频Videobox使用swfobject来嵌入Flash视频可以来自YoutubeMetacafeGoogle VideoiFilm和自己设置的Flash如果你要达到效果必须使用videoboxjsmootoolsjs和swfobject脚js这个三个脚本
类似滚动滑动的插件还有bxSlider 等等bxSlider是一个 jQuery 的插件它可以实现 Slider 和滚动效果这个插件使用非常简单并且大小只有 kb非常轻量级所以非常适合在站点和博客中使用
