Analysis on the principle of jQuery's implementation of the effect of Image Riding Lights _ jquery

This article mainly introduces the principle of jQuery's implementation of the effect of Image Riding Lights, and analyzes in detail jQuery's implementation of html page design, css style layout, and jQuery-related functions based on examples, for more information, see the example in this article. We will share this with you for your reference. The details are as follows:

Here, we will only explain the effect of horizontal drive lights. the effect of vertical drive lights is not explained. The principle is the same, but there is a small pitfall in the effect of horizontal drive lights. Coming Soon

First run the code:

HTML:

In

Contains a p, and a large width is set to solve a pitfall that is not found under the vertical lawn lamp. The effect of this pitfall is when the float label of li is left. do not use the DIV inside. after the image is carousel, the last image in the display will jump from bottom to top, this is caused by the characteristics of float, because when the width of the parent element is not enough, the following elements will automatically sink to the left, and once the width above is enough, it will automatically float up, this floating will cause the beating effect of the last image in the display. Therefore, an internal DIV is nested and set

To solve this problem.

CSS:

.box{ width: 800px; height: 200px; margin-top: 100px; margin-left: 100px; overflow: hidden;}.box img{ border-style: none; height: 200px;}.box ul{ margin: 0px; padding: 0px; list-style-type: none;}.box ul li{  float: left;}

Script: