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非常輕量級所以非常適合在站點和博客中使用
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20526.html
