jQuery bxCarousel implements image scrolling switching effect sample code_jquery

BxCarousel is an easy-to-use Jquery image scrolling plug-in with many configurations. Its main features are:
◆ You can specify the total number of elements to be displayed
◆ You can specify the number of elements to scroll each time
◆ Automatic play mode
◆ The previous/next button controls the flow of pictures
Parameter meaning:
display_num: Display the number of elements, several pictures
move: When clicking the left and right control keys , the number of elements to move, here is the move of 2 images
prev_image: the previous element button image
next_image: the next element button image
margin: the gap between the images, generally set to 10px
auto: automatic scrolling effect
controls: whether to display the left and right control buttons, false here means not to display the left and right control buttons
auto_hover: whether to stop the image carousel when the mouse hovers over the carousel area
BxCarousel usage and configuration
First the HTML code needs to conform to the following format

Copy the code The code is as follows:

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

Copy code The code is as follows:

$(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

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
});
});

html elements such as div.bx_container and div.bx_wrap are generated and added by js. When using the bxCarousel plug-in, in order to achieve visual beauty, remember to add div.bx_container, div.bx_wrap and their internal Set the required CSS Style for child elements.
Also note that
bxCarousel is an infinite loop mechanism. Keep clicking the next button to see what happens to the html! !
bxCarousel not only works on images, but also on any other html elements.
If you enable the auto attribute, be sure to ensure that the speed attribute value is less than the duration.
Example code:

Copy code The code is as follows:

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

• 
  图片1


• 
  图片2


• 
  图片3


• 
  图片4


• 
  图片5


• 
  图片6


• 
  图片7


• 
  图片1


• 
  图片2


• 
  图片3


• 
  图片4


• 
  图片5


• 
  图片6


• 
  图片7

• 
  图片1


• 
  图片2


• 
  图片3


• 
  图片4


• 
  图片5


• 
  图片6

Mobile

In this example, the light box effect is also implemented. Thanks to the videobox plug-in, both pictures and videos are supported. Many lightbox effect scripts and plug-ins, such as jQuery Lightbox Plugin, Videobox, MooslideBox,, Shadowbox and LightWindow Wait.
Videobox is a script with only 6k size, used to display videos on the page. Videobox uses swfobject to embed Flash. Videos can come from Youtube, Metacafe, Google Video, iFilm and Flash set by yourself. If you want to achieve the effect, you must use three scripts: videobox.js, mootools.js and swfobject.js.

Plug-ins similar to scrolling and sliding include bxSlider, etc. bxSlider is a jQuery plug-in that can achieve Slider and scrolling effects. This plugin is very simple to use and is only 8kb in size, making it very lightweight, so it is ideal for use on sites and blogs.