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:
Copy codeThe Code is as follows:
<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>
The jQuery code must conform to the following format::
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 <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:
The Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta content = "text/html; charset = UTF-8" http-equiv = "Content-Type">
<Title> </title>
<Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<Script type = "text/javascript" src = "js/bxCarousel. js"> </script>
<Script type = "text/javascript">
JQuery (function (){
JQuery ('# demo1'). bxCarousel ({
Display_num: 4 ,//
Move: 1,
Auto: true,
Controls: false, // if this parameter is set to false, the left and right arrow control buttons are not displayed.
Margin: 10,
Auto_hover: true // specifies whether to stop image carousel when you hover your mouse over the carousel area.
});
JQuery ('# demo2'). bxCarousel ({
Display_num: 4,
Move: 4,
Margin: 10
});
});
</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: 200px;
Height: 200px;
Margin: 0 auto;
}
. Pic a,. vd {
Display: block;
Width: 200px;
Height: 200px;
Text-align: center;
Margin: 0 auto;
}
. Pic {
Background: url ("http://i0.sinaimg.cn/home/2013/0513/U2727P30DT20130513082202.jpg") no-repeat scroll 0 0 transparent;
}
. Vd {
Background: url ("http://i0.sinaimg.cn/home/2013/0512/U1345P30DT20130512114119.jpg") no-repeat scroll 0 0 transparent;
}
. Nav,. main,. imgcollc,. footer {
Width: 910px;
Margin: 0 auto;
Text-align: center;
}
/* If you want to use the direction button navigation, you need to set the style of. bx_wrap a. prev and. bx_wrap a. next. */
A {color: #424242; text-decoration: none ;}
Ul, li, ol {padding: 0; margin: 0; list-style: none ;}
. Bx_wrap {margin-left: 30px; margin-top: 10px ;}
. Bx_wrap ul img {border: 2px solid # ddd ;}
. Bx_wrap ul li {text-align: center; float: left; width: 140px; height: 119px; overflow: hidden ;}
. Bx_wrap ul li a: hover {text-decoration: none; color: # f30 ;}
. Bx_wrap. prev {width: 20px; height: 24px; line-height: 24px; outline-style: none; outline-width: 0; position: absolute; top: 45px; left: 5px; text-indent:-999em; background: url (img/arr_left.gif) no-repeat ;}
. Bx_wrap. next {width: 20px; height: 24px; line-height: 24px; left: 623px; position: absolute; top: 45px; text-indent:-999em; background: url ('img/arr_right.gif ') no-repeat ;}
. Demo {width: pixel PX; height: 134px; margin: 40px auto; position: relative; border: 1px solid # d3d3d3; overflow: hidden;
}
</Style>
</Head>
<Body>
<Div class = "nav">
</Div>
<Div class = "main">
<H2 class = "top_title"> <a href = "http://www.feiliu.com/"> jQuery achieves video Window Scaling and image scrolling switching </a> <Div class = "pic">
<A onfocus = "blur ()" id = "img" href = "http://imgsrc.baidu.com/forum/pic/item/ed178044ad345982578b3fa90cf431adcaef84d7.jpg" rel = "vidbox 640 376" title = "test jpg"> </a>
</Div>
<Div class = "vd">
<A onfocus = "blur ()" id = "vd" href = "http://www.novelstudios.com/media/Visions_CellPhone.mov" rel = "vidbox 640 376" title = "test video"> </a>
</Div>
</Div>
<Div class = "imgcollc">
<Div class = "demo">
<Ul id = "demo1">
<Li> <a href = "#"> <br/> figure 1 </a> </li>
<Li> <a href = "#"> <br/> image 2 </a> </li>
<Li> <a href = "#"> <br/> figure 3 </a> </li>
<Li> <a href = "#"> <br/> figure 4 </a> </li>
<Li> <a href = "#"> <br/> figure 5 </a> </li>
<Li> <a href = "#"> <br/> figure 6 </a> </li>
<Li> <a href = "#"> <br/> figure 7 </a> </li>
<Li> <a href = "#"> <br/> figure 1 </a> </li>
<Li> <a href = "#"> <br/> image 2 </a> </li>
<Li> <a href = "#"> <br/> figure 3 </a> </li>
<Li> <a href = "#"> <br/> figure 4 </a> </li>
<Li> <a href = "#"> <br/> figure 5 </a> </li>
<Li> <a href = "#"> <br/> figure 6 </a> </li>
<Li> <a href = "#"> <br/> figure 7 </a> </li>
</Ul>
</Div>
<Div class = "demo">
<Ul id = "demo2">
<Li> <a href = "#"> <br/> figure 1 </a> </li>
<Li> <a href = "#"> <br/> image 2 </a> </li>
<Li> <a href = "#"> <br/> figure 3 </a> </li>
<Li> <a href = "#"> <br/> figure 4 </a> </li>
<Li> <a href = "#"> <br/> figure 5 </a> </li>
<Li> <a href = "#"> <br/> figure 6 </a> </li>
</Ul>
</Div>
</Div>
<Div class = "footer"> Mobile </div>
</Body>
</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.
