"JavaScript" compatible IE6 adjustable and controllable picture sliders

Picture slider actually also with the picture carousel, need not so many strange code to be able to realize, but the layout is a bit complex, and this thing in bootstrap inside also not, in the webpage, this component also more and more rare, after all, this small component too wasted network resources, the logic of the realization is more complex, If you do not want to be specifically asked, can not do the best bad.

Sometimes, if a simple web page like "CSS" black humor, compatible with IE6 's Pure pristine portal (click Open link) can be delivered, don't show off your front-end skills.

Although the efficiency of this component is very low, it also explains the principle of implementation, is perfectly compatible with IE6, and the package you can place this component at will. Not like the network of a lot of complex code, do not know what to write, and do not know how to modify.

I. BASIC OBJECTIVES

or "JavaScript" original eco-compatible IE6 picture Carousel (Click to open the link) those photos from Windows bring the picture, in the WinXP original IE6 Browser, achieve the following effects:

A picture slider component that automatically moves to the right one time every 2 seconds, with a total of four images, showing three photos at a time.

Of course we also offer two buttons that users can move their own pictures

Click on the corresponding picture to maximize the nature. Select and then open a window to view. Very simple.

Second, the basic layout

The layout is as follows:

The HTML layout code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Please note why the four images that need to be displayed are arranged, and the two images from the beginning should be re-arranged.
See, the red box represents the part being displayed, altogether four conditions, and then constantly circulating, giving the impression that a picture sequence is like right sliding.

If you display 2 pictures at a time, then after the normal picture sequence, you can add one image from the beginning, and the same is four display states, which just form a loop. In other words, if you want to display n images every time, you should add N-1 images from scratch after the entire picture sequence.

Perhaps some people have asked why the use of such a contrary to ordinary thinking of the way to decorate pictures? You can't, like, put four pictures in the picture sequence, and then show the first three, the last one, and use the script to control the elements of the image sequence array, or other similar methods. Anyway, the image sequence array can be taken as "JavaScript" using getElementsByTagName and Getelementsbyname to improve the original eco-compatible IE6 tab (click the Open link)?

This can work in theory, and there are two more ways in javascript: Unshift () adds an element and pop () to the array before it deletes the last element of the array and returns the element, which is used to implement this transposition! However, in fact, this array of node sequences taken from the getElementsByTagName, unlike the array created by the new Array (), is like an array of pointers in C, and you are referencing by pointer manipulation, so you cannot swap the position of this array of node sequences, for example, Do you see it? Point this array and find only two methods.

Or some good people see the HTML Layout part of the code is cumbersome, and then ask, why can't you save these nodelist to a new Array (), and then swap location? And then through this new Array () is the element generated under the parent node? So first of all don't say you don't make sense to add a n space complexity and time complexity, anyway I tried to not work at all, save to save, "after" Alert This new Array (), a bunch of control. Maybe it's because nodelist is not a normal element, is it? So there is no way, only according to the method of adding N-1 pictures. Online for the picture slider approach is to use this idea, I looked for two hours of information, have not seen without the idea of ...

Third, Core script
JavaScript scripts are written according to the ideas above, and it's easy to figure out what to do with the code.
Whether the picture is displayed or not is controlled by the control of the display property of the image via JavaScript, instead of writing a mask layer with JavaScript, and not displaying the mask, as part of the code on the Web.
At that time I looked at the sweat of the typical flash dog transition to the Web front end of the ActionScript great God.
<script>//This is the "Show box" position, from the beginning of the X-picture display, the rest of the hidden var display_tag=0;//page load will call this function, parameter 1 for the right scroll, Notice the function called by the HTML button you know Pic_marquee_move (1);//2s transforms once SetInterval ("Pic_marquee_move (1)", "a"); function pic_marquee_ Move (Leftorright) {//If the parameter is 0 to the left, the user presses the left button to have this case if (leftorright==0) {display_tag--;//If you scroll to the left, immediately to the right if (display_tag< 0) {display_tag=3;}} Vice versa else{display_tag++;if (display_tag>3) {display_tag=0;}} Take out the picture sequence var Picmarqueearr=document.getelementbyid ("Picmarquee"). getElementsByTagName ("div"); for (Var i=0;i< picmarqueearr.length;i++) {//starting from the display position, the latter 3 pictures are displayed if (i>display_tag-1&&i<display_tag+3) {picmarqueearr[ i].style.display= "Block";} The remaining hidden else{picmarqueearr[i].style.display= "none";}}} </script>

Iv. Summary and Prospect
1, if asked to do the picture slider, not designated to this, you might as well directly in a row inside put four pictures, such as, do not bother!

If there are too many pictures, use the "JavaScript" original eco-compatible IE6 image Carousel (click the open link) image carousel to achieve. After all, this component, if there are 200,000 pictures to display, to load 399999 pictures, the complexity is very bad.
2, the right scroll is actually "show box" in motion, giving a visual illusion
3, later in Java or C programming, encounter like this need to move the last element of the array to the top of the problem, you can consider such as, in the normal sequence to save several elements of the beginning of the sequence of elements, to achieve a moving illusion, if the elements are only used to display the words.
"JavaScript" compatible IE6 adjustable and controllable picture sliders