Source code download
BxCarousel parameter description:
Move: the number of images to be moved each time. The default value is 4.
Display_num: Number of displayed images. The default value is 4.
Speed: The image scrolling speed. The default value is 500 milliseconds.
Margin: the spacing between images. The default value is 0.
Auto: whether to scroll automatically. The default value is false.
Auto_interval: Specifies the interval (in milliseconds) between auto-scrolling. The default value is 2000 milliseconds, that is, 2 seconds.
Auto_dir: the direction of automatic scrolling. The default value is next. You can try prev.
Next_image: Click the image to roll to the right, which can be set with CSS.
Prev_image: Click the image to roll to the left, which can be set with CSS.
Auto_hover: Indicates whether to stop scrolling when the mouse slides. The default value is false.
Controls: whether to display the left and right scrolling button image. The default value is true.Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Meta name = "keywords" content = "image scrolling, jquery plugin"/>
<Meta name = "description" content = "Helloweba demo platform, which demonstrates XHTML, CSS, jquery, PHP cases, and examples"/>
<Title> image scrolling effect implemented by jQuery + CSS </title>
<Style type = "text/css">
Ul {margin: 0; padding: 0 ;}
. Demo {width: pixel PX; height: 134px; margin: 60px auto; clear: both; position: relative; border: 1px solid # d3d3d3}
. Bx_wrap {margin-left: 10px; margin-top: 10px}
. Bx_wrap ul img {border: 2px solid # ddd ;}
. Bx_wrap ul li {text-align: center}
. 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: -2px; text-indent:-999em; background: url (img/arr_left.gif) no-repeat ;}
. Bx_wrap. next {width: 20px; height: 24px; line-height: 24px; left: 626px; position: absolute; top: 45px; text-indent:-999em; background: url (img/arr_right.gif) no-repeat ;}
</Style>
<Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<Script type = "text/javascript" src = "bxCarousel. js"> </script>
<Script type = "text/javascript">
$ (Function (){
$ ('# Demo1'). bxCarousel ({
Display_num: 4,
Move: 1,
Auto: true,
Controls: false,
Margin: 10,
Auto_hover: true
});
$ ('# Demo2'). bxCarousel ({
Display_num: 4,
Move: 4,
Margin: 10
});
});
</Script>
</Head>
<Body>
<Div id = "header">
<Div id = "logo"> </Div>
<Div id = "main">
<H2 class = "top_title"> <a href = "http://www.helloweba.com/view-blog-139.html"> image scrolling effect implemented by jQuery + CSS </a> <Div class = "demo">
<Div class = "bx_wrap">
<Div class = "bx_container">
<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>
</Div>
<Div class = "demo">
<Div class = "bx_wrap">
<Div class = "bx_container">
<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>
<Br/>
<Br/>
<Br/>
<Br/>
<Br/>
<Br/>
<Br/>
</Div>
<Div id = "footer">
<P> Powered by helloweba.com allows reprinting, modifying and using the DEMO of this site, but please note the Source: <a href = "http://www.helloweba.com"> www.helloweba.com </a> </p>
</Div>
</Body>
</Html>
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
