Image scrolling effect implemented by jquery + CSS

In this example, a series of image scrolling effects are achieved. It is suitable for displaying the homepage of a website, such as a picture library or a link to a partner. You can control the image scrolling speed, automatically or manually scroll the image, and hover the mouse over the image.

 

XHTML

 
<Div class = "bx_wrap">
<Div class = "bx_container">
<Ul id = "demo1">
<Li>  </LI>
<! -- More images -->
</Ul>
</Div>
</Div>
 

XHTML is an unordered list ul composed of a group of images. It gives ul an ID attribute for JS calls. In addition, UL's parent Div. bx_container and Div. bx_wrap are required. In addition, remember to load the jquery library and JS plug-ins required for scrolling between headers:

<SCRIPT type = "text/JavaScript" src = "JS/jquery. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "JS/bxcarousel. js"> </SCRIPT>
 

CSS

. 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 A. 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 A. 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 ;}
 

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.

Jquery

$ ("# Demo1"). bxcarousel ({
Display_num: 4,
Move: 1,
Auto: True,
Controls: false,
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.

 

 

Reprinted:

Http://www.helloweba.com/view-blog-139.html