![]() ![]() To determine the index number of the current pic on display, this function uses “getComputedStyle(pic).getPropertyValue(“left”)” as shown in line 9 to return the index number of the pic which has a “left” CSS value of 0px. In this function, we first assign an index number to each of the 4 pictures. We’ll analyze the individual functions next. And with the use of the CSS’s “transition: left 0.3s” property, each change of the left property value produces the desired slide animation effect. ![]() In this way, we can shift the pics left or right by subtracting or adding to their “left” values, and the pic that gets shown on the screen is the one whose “left” value ends up being 0px. Pic #2 is displayed inside #picFrame because it now has a “left” value of 0px, and all other images have overflowed outside of #picFrame. Now the 4 image containers have shifted left, possessing “left” values of -1000px, 0px, 1000px and 2000px, respectively. To view pic #2, we use JavaScript to subtract 1000px from each image container’s “left” property. Only image #1 at the very left is visible inside the #picFrame at the start because #picFrame is only 1000px wide, and #picFrame hides its overflow. At the beginning, the 4 image containers possess “left” CSS property values of 0px, 1000px, 2000px and 3000px, respectively. Lastly, we will look at the JavaScript, which changes the “left” CSS values of each image container to move them to the left or to the right. ![]()
0 Comments
Leave a Reply. |