Bxcarousel is an easy-to-use jquery image scrolling plug-in with many configurations, featuring:
You can specify the total number of elements to display
You can specify the number of elements to scroll each time
Auto Playback mode
Previous/Last button controls picture flow
parameter meaning：
Display_num: Displays the number of elements, several pictures
Move: The number of elements that are moved when you click the left and right control keys, where 2 pictures are moved
Prev_image: previous element button picture
Next_image: Next element button picture
Margin: The gap between pictures, generally set to 10px
Auto: Automatic scrolling effect
CONTROLS: Whether to display the left and right control buttons, this is false, which means that the left and right control buttons are not displayed
Auto_hover: Stop picture Carousel When the mouse hovers over the carousel area
Bxcarousel Use and Configuration
First, the HTML code needs to conform to the following format
Copy Code code 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>
jquery code needs to conform to the following format：
Copy Code code 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 is applied to all <li> element (in pixels, although does not include "px")
Auto:false,//Automatically play slides without a user click
auto_interval:2000,//The amount of time in milliseconds between per auto animation
Auto_dir: ' Next ',//direction of Auto Slideshow (options: ' Next ', ' prev ')
Auto_hover:false,//determines if the slideshow would stop when user hovers over slideshow
Next_text: ' Next ',//text to is used for the ' Next ' control
Next_image: ',//image to being used for the ' Next ' control
Prev_text: ' prev ',//text to is used for the ' prev ' control
Prev_image: ',//image to is used for the ' prev ' control
Controls:true//Determines if controls would be displayed
});
});
Div.bx_container and Div.bx_wrap HTML elements such as JS Generation Plus, in the use of Bxcarousel plug-ins, in order to achieve visual beauty, to remember for Div.bx_container and Div.bx_ Wrap and its inner child element settings require CSS Style.
And the note is that
Bxcarousel is an infinite loop mechanism that keeps clicking on the Next button to see what happens to the HTML!!
Bxcarousel is not just for pictures, it works for any other HTML element.
If you turn on the Auto property, be sure to ensure that the speed property value is less than the duration.
Instance Code：
Copy Code code as follows:
<! DOCTYPE html>
<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,//Here is false, indicating that the left and right arrow control buttons are not displayed
Margin:10,
Auto_hover:true//mouse hover over the carousel area, stop picture carousel
});
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 a{
Display:block;
width:200px;
height:200px;
Text-align:center;
margin:0 Auto;
}
. pic{
Background:url ("yun_qi_img/u2727p30dt20130513082202.jpg") no-repeat scroll 0 0 transparent;
}
. vd{
Background:url ("yun_qi_img/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 to navigate, 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 A.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 A.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:650px;height:134px;margin:40px auto;position:relative;border:1px solid #d3d3d3; overflow:hidden;
}
</style>
<body>
<div class= "NAV" >
</div>
<div class= "Main" >
<H2 class= "Top_title" ><a href= "http://www.feiliu.com/" >jquery realized video window scaling, picture scrolling effect </a><div class= "pic" >
<a onfocus= "blur ()" Id= "img" href= "yun_qi_img/ed178044ad345982578b3fa90cf431adcaef84d7.gif" 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/> photo 1</a> </li>
<li><a href= "#" ><br/> photo 2</a> </li>
<li><a href= "#" ><br/> photo 3</a> </li>
<li><a href= "#" ><br/> photo 4</a> </li>
<li><a href= "#" ><br/> photo 5</a> </li>
<li><a href= "#" ><br/> photo 6</a> </li>
<li><a href= "#" ><br/> photo 7</a> </li>
<li><a href= "#" ><br/> photo 1</a> </li>
<li><a href= "#" ><br/> photo 2</a> </li>
<li><a href= "#" ><br/> photo 3</a> </li>
<li><a href= "#" ><br/> photo 4</a> </li>
<li><a href= "#" ><br/> photo 5</a> </li>
<li><a href= "#" ><br/> photo 6</a> </li>
<li><a href= "#" ><br/> photo 7</a> </li>
</ul>
</div>
<div class= "Demo" >
<ul id= "Demo2" >
<li><a href= "#" ><br/> photo 1</a> </li>
<li><a href= "#" ><br/> photo 2</a> </li>
<li><a href= "#" ><br/> photo 3</a> </li>
<li><a href= "#" ><br/> photo 4</a> </li>
<li><a href= "#" ><br/> photo 5</a> </li>
<li><a href= "#" ><br/> photo 6</a> </li>
</ul>
</div>
</div>
<div class= "Footer" >Mobile</div>
</body>
In this example, the effect of light box is also realized. Thanks to the Videobox plugin, it is supported for both pictures and videos. Many of the box effects of the script and plug-ins, such as jquery Lightbox Plugin,videobox, Mooslidebox,,shadowbox and Lightwindow and so on.
Videobox is a 6k-size script that displays video on a page. Videobox uses SWFObject to embed flash. Videos can be from YouTube, Metacafe, Google video, Ifilm and their own set of flash. If you want to achieve the effect, you must use the Videobox.js,mootools.js and SWFObject foot. js three scripts.
such as scrolling sliding plug-ins and bxslider and so on, Bxslider is a jQuery plug-in, it can achieve Slider and scrolling effect. This plugin is very easy to use and is only 8kb in size and lightweight, so it is ideal for use in sites and blogs.
