Code _ jquery

This article mainly introduces the jquery-based code for simulating Youku image carousel effects, interested friends can refer to this article to share with you a common and complex carousel effect, that is, the carousel image on the Youku main interface, as shown below:

Before writing the code, we analyze the structure:

1. Two buttons in the left and right directions can be used to switch the previous one and the next one.

2. There is a paging indicator below to mark the number of scrolling images. Of course, you can click the corresponding button to jump to the corresponding image.

3. The main display area in the middle is used to place images that require carousel.

As described above, we can first write HTML code.

I. HTML code

The Code content is clear at a glance and consistent with what I described above. There are two points I need to describe:
1. class is the ul of tuul, that is, the image to be carousel is stored. There are two main types of li in it: packaged as "no" and "waiting, the "no" series indicates images that may be in the "active" status, while "waiting" indicates that these images are currently hidden and will be reflected in the following CSS code.

2. By default, the paging indicator sets the third class of li as cur. because the number of "active" images set at the beginning of tuul is 5, the third class is centered by default. I don't know if you have any questions. In the initial status, the number of images displayed on the page is three. Why don't you select the second image as the center image? This is because when you click the button on the left, if you select the second center, you can see the first one, but there is no picture in front of the first one. When you click the left button, it will show up. Therefore, the overall design idea is: three items are displayed on the interface, and each part of the interface is exceeded. There is one on the left and right, but it is invisible. In the following illustration, I will explain in detail the implementation process.

Ii. CSS code

I will not describe the CSS here. For more details, refer to my previous series of JS & JQuery. Here, I only describe two points:
1. Set the CSS of the "active" image, that is, # youku li. no0 ~ In the settings of no4, we noticed that the left value of no0 is negative, while the left value of no1 is 0, which confirms the above point of view, the static state of the visible range shows three images, while the remaining two images are on the left and right of the visible range. Pay attention to setting the z-index value of each image to enable stereoscopic attention. The larger the value, the higher the front display.

2. Set opacity for images on both sides of the visible range to make them dimmed.

After the preceding CSS code is set, the analysis is as follows:

Iii. JQuery code