The jQuery code must conform to the following format::Copy codeThe 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:Copy codeThe 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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
