Image scrolling effect implemented by jquery + CSS

Source: Internet
Author: User

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

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.