<! 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"/> <Title> image scrolling effect implemented by jQuery + CSS </title> <Link rel = "stylesheet" type = "text/css" href = "../css/main.css"/> <Style type = "text/css"> . Demo {width: pixel PX; height: 134px; margin: 40px 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 }); }); /* 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. */ </Script> </Head>
<Body> <Div id = "main">
<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>
</Div> </Body> </Html> |