Jquery bxcarousel implements image scrolling Switching

Bxcarousel is a jquery image rolling plug-in with many configurations and ease of use. It has the following features:

◆ You can specify the total number of displayed elements.

◆ You can specify the number of elements to be rolled each time.

◆ Automatic playback Mode

◆ The previous/last button controls the image Flow

Parameter description:

Display_num: Number of display elements, number of images

Move: When you click the left and right control keys, the number of elements to move. Here, two images are moved.

Prev_image: the image of the previous button

Next_image: button image of the next element

Margin: gap between images, usually set to 10px

Auto: auto scroll Effect

Controls: whether to display the left and right control buttons. If this parameter is set to false, the left and right control buttons are not displayed.

Auto_hover: Specifies whether to stop image carousel when you hover your mouse over the carousel area.

Bxcarousel usage and Configuration

First, the HTML code must conform to the following format:

<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 code must conform to the following format:

$ (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 and Div. HTML elements such as bx_wrap are generated by JS. When using the bxcarousel plug-in, remember to use Div for visual aesthetic. bx_container and Div. bx_wrap and its internal child elements are used to set the CSS style.

Note that,

Bxcarousel is an infinite loop mechanism. It keeps clicking the next button to see what has changed in HTML !!

Bxcarousel not only applies to images, but also to any other HTML elements.

If the auto attribute is enabled, make sure that the speed attribute value is earlier than the duration.

Instance code:

 

<! Doctype HTML> 
 
The lightbox effect is also implemented in this example. Because the videobox plug-in is used, images and videos are supported. Many lightbox effects scripts and INS, such as jquery lightbox plugin, videobox, mooslidebox, shadowbox, and lightwindow.
Videobox is a 6 K script used to display videos on the page. Videobox uses swfobject to embed flash. Videos can come from YouTube, metacafe, Google Video, ifilm, and self-configured flash. To achieve this, you must use videobox. JS, mootools. JS, and swfobject script. js.
 
Plug-ins like scroll slider and bxslider. bxslider is a jquery plug-in that can implement slider and scroll effect. This plug-in is very simple to use, and the size is only 8 KB, very lightweight, so it is very suitable for use in sites and blogs.