熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

jQuery bxCarousel實現圖片滾動切換

2013-11-15 12:13:31  來源: JSP教程 

  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" httpequiv="ContentType" >
<title></title>
<script type="text/javascript" src="
<script type="text/javascript" src="js/bxCarouseljs"></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/mootoolsjs"></script>
<script type="text/javascript" src="/video/js/swfobjectjs"></script>
<script type="text/javascript" src="/video/js/videoboxjs"></script>
<link rel="stylesheet" type="text/css" href="/video/css/videoboxcss" >
<style type="text/css">
pic vd{
width:px;
height:px;
margin: auto;
}
pic a vd a{
display:block;
width:px;
height:px;
textalign:center;
margin: auto;
}
pic{
background:url("
}
vd{
background:url("
}
navmainimgcollc footer{
width:px;
margin: auto;
textalign:center;
}
/*如果要使用方向按鈕導航則需要設置bx_wrap aprev和bx_wrap anext的樣式*/
a {color: #;textdecoration: none;}
ulliol{padding:;margin:;liststyle:none;}
bx_wrap {marginleft: px; margintop:px;}
bx_wrap ul img { border: px solid #ddd; }
bx_wrap ul li{textalign:center;float:left;width:px;height:px;overflow:hidden;}
bx_wrap ul li a:hover{textdecoration:none; color:#f;}
bx_wrap aprev {width:px;height:px;lineheight:px;outlinestyle:none;outlinewidth: ; position:absolute; top:px; left:px; textindent:em; background: url(img/arr_leftgif) norepeat;}
bx_wrap anext {width:px;height:px;lineheight:px; left:px;position: absolute; top:px; textindent:em; background:url(img/arr_rightgif) norepeat;}
demo {width: px;height: px;margin: px auto;position: relative;border: px solid #ddd;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/sjpg"><br/>圖片</a></li>
<li><a href="#"><img alt="#" width="" height="" src="img/sjpg"><br/>圖片</a></li>
<li><a href="#"><img alt="#" width="" height="" src="img/sjpg"><br/>圖片</a></li>
<li><a href="#"><img alt="#" width="" height="" src="img/sjpg"><br/>圖片</a></li>
<li><a href="#"><img alt="#" width="" height="" src="img/sjpg"><br/>圖片</a></li>
<li><a href="#"><img alt="#" width="" height="" src="img/sjpg"><br/>圖片</a></li>
<li><a href="#"><img alt="#" width="" height="" src="img/sjpg"><br/>圖片</a></li>
<li><a href="#"><img alt="#" width="" height="" src="img/sjpg"><br/>圖片</a></li>
<li><a href="#"><img alt="#" width="" height="" src="img/sjpg"><br/>圖片</a></li>
<li><a href="#"><img alt="#" width="" height="" src="img/sjpg"><br/>圖片</a></li>
<li><a href="#"><img alt="#" width="" height="" src="img/sjpg"><br/>圖片</a></li>
<li><a href="#"><img alt="#" width="" height="" src="img/sjpg"><br/>圖片</a></li>
<li><a href="#"><img alt="#" width="" height="" src="img/sjpg"><br/>圖片</a></li>
<li><a href="#"><img alt="#" width="" height="" src="img/sjpg"><br/>圖片</a></li>
</ul>
</div>
<div class="demo">
<ul id="demo">
<li><a href="#"><img alt="#" width="" height="" src="img/sjpg"><br/>圖片</a></li>
<li><a href="#"><img alt="#" width="" height="" src="img/sjpg"><br/>圖片</a></li>
<li><a href="#"><img alt="#" width="" height="" src="img/sjpg"><br/>圖片</a></li>
<li><a href="#"><img alt="#" width="" height="" src="img/sjpg"><br/>圖片</a></li>
<li><a href="#"><img alt="#" width="" height="" src="img/sjpg"><br/>圖片</a></li>
<li><a href="#"><img alt="#" width="" height="" src="img/sjpg"><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
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.