jQuery bxCarousel實作圖片滾動切換效果範例程式碼_jquery

BxCarousel是一個具有眾多配置且易用的Jquery圖片滾動插件，特徵主要有：
◆ 可以指定顯示的元素總數
◆ 可以指定每次捲動的元素個數
◆ 自動播放模式
◆ 前一張/後一張按鈕控制圖片流動
參數意義：
display_num：顯示元素的數量，幾張圖片
move：按一下左右控制鍵時，移動的元素個數，此處為移動2張圖片
prev_image：上一元素按鈕圖片
next_image：下一元素按鈕圖片
margin：圖片之間的間隙，一般設為10px
auto:自動滾動效果
controls：是否顯示左右控制按鈕，此處為false,表示不顯示左右控制按鈕
auto_hover：滑鼠懸停到輪播區域時，是否停止圖片輪播
BxCarousel使用與設定
首先HTML程式碼需要符合以下格式

複製程式碼 程式碼如下:

程式碼如下:

• first piece of content


• second piece of content


• third piece of content


• fourth piece of content


• bxCarousel can accept an unlimited number of elements

jQuery程式碼需要符合以下格式：

複製程式碼


程式碼如下:



程式碼如下:


$ ).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

element (in pixels, although do nots, px")
auto: false, // automatically play slides without a user click
auto_interval: 2000, // the amount of time in milliseconds between each auto animation

auexto_dir: 'nextau' 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 slideshow
next_text: 'next', // text to be slideed 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屬性值小於持續時間。 實例碼： 複製程式碼 程式碼如下:

jQuery实现的视频窗口伸缩、图片滚动切换效果

• 
  圖片1


• 
  圖片2


• 
  圖片3


• 
  圖片4
  
• 
  圖5


• 圖6


• 
  圖7


• 
  圖片1


• 
  圖片2


• 
  圖片3


• 
  圖片4


• 
  圖片5


• 
  圖片6


• 
  圖片7
  

• 
  圖片1


• 
  圖片2


• 
  圖片3


• 
  圖片4


• 
  圖片5


• 
  圖6

行動版

身體>

この例では、ライト ボックス効果も実装されています。 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 の 3 つのスクリプトを使用する必要があります。

スクロールやスライドに似たプラグインとしては、bxSliderなどがあります。 bxSliderは、スライダーやスクロール効果を実現できるjQueryプラグインです。このプラグインは使い方が非常に簡単で、サイズがわずか 8kb で非常に軽量なので、サイトやブログでの使用に最適です。