Implement click-arrow Toggle Picture page and album scrolling

Again to introduce a small task that is also written two days ago, this is more complex than the previous, but the speed of writing is faster than the previous, perhaps this is the practice of practice, but I am not writing this project is very perfect, I have some lazy psychology, do not want to think deeply, almost on the line, Because I feel that just start not to find fault with their own, put themselves forced to sit down instead of learning, and so later the ability to gradually enhance, write these things or write these things perfect should be a cinch.

<div class= "BBS Mr" >
<div class= "Arrleft" ></div>
<div class= "Zsarea" id= "Zsarea" >


<div class= "Imgnr" > Various introduction to what all kinds of introduction what the various introduction what kind of various introductions what various introductions what the various introduced what all kinds of introduction what the various introduction what kinds of introductions what all kinds of introduction What's the various introduction what all sorts of introducing what all sorts introduction what all kinds of introductions what all sorts of introducing what all kinds of introduce what all sorts introduces what kind </div>
</div>
<div class= "Arrright" ></div>
</div>
<div class= "ss" >
<a href= "#" class= "Up" ></a>"
<a href= "#" class= "pic" ><a href= "#" class= "pic" ><a href= "#" class= "pic" ></a>
<a href= "#" class= "pic" ><a href= "#" class= "pic" ><a href= "#" class= "pic" ><a href= "#" class= "pic" ><a href= "#" class= "pic" ><a href= "#" class= "pic" >
<a href= "#" class= "one" ><a href= "#" class= "one" ><a href= "#" class= "one" ><a href= "#" class= "one" ><a href= "#" class= "one" ><a href= "#" class= "one" ><a href= "#" class= "one" ><a href= "#" class= "one" ><a href= "#" class= "one" >
<a href= "#" class= "Down" ></a>"

</div>

I want to achieve the two features, one is a large picture of the left and right arrows, to ensure that the two arrows when the picture will be toggled, the text below the picture to follow together to switch, and the other side of the row of albums of the white box on the current display of the picture, the second function, Is the right row of pictures the top and bottom of the upper and lower arrow buttons, this album contains 9 pictures, and in fact, a total of 18, of which 9 is not shown, what I want to do is to click the downward arrow when the picture to achieve the effect of upward scrolling, the following image to a picture to the top up , when all the pictures have been displayed, then click the down arrow button will not move, at this time, if you click the UP arrow button, the album will scroll up, in this process, the current picture of the white box corresponding to the picture and the picture of the descriptive text to display in the left big picture and the following text.

$ (function () {
var arrleft = $ (". Arrleft");
var arrright = $ (". Arrright");

var = $ (". Up");
var = $ (". Down");

The above is to get the left and right arrows and up and down arrows, easy to follow the operation, add events
var IMGs = $ (". SS a img");
var len = imgs.length;

The above is the 18 photos in the album, put them in an array, and later to loop display
var zsareaimg = $ ("#zsarea img");
var Imgnr = $ (". Imgnr");

Above is the large picture placeholder on the left and the descriptive text placeholder below the large picture
var Oneimgs = $ (". One");
Oneimgs.hide ();

The above is to get the next 9 photos and hide them

The following separately adds a Click event to each arrow
Arrleft.click (function () {
for (var i = 2; i < len-1; i++) {//Why do I start from 2, because the first element of the IMGs array is the UP arrow, and here the 2 represents the third element, because the following line has a prev representing the previous element, here is a bit confusing, but I don't know Tao what mean, I just said this project is not perfect in this place, may be because I am not good at maths, the mind is not clear, the relationship between the prime minister to come, just forget
if (Imgs.eq (i). Parent (' a '). Prev (). Children (' img '). CSS (' height ') = = 18) {
Break
}
if (Imgs.eq (i). Hasclass (' Now ')) {//control the currently displayed picture with the current class
Imgs.eq (i). Removeclass (' Now ');
Imgs.eq (i). Parent (' a '). Prev (). Children (' img '). addclass (' Now ');
Zsareaimg.attr ("src", imgs.eq (i). Parent (' a '). Prev (). Children (' img '). attr ("src"));
Imgnr.text (Imgs.eq (i). Parent (' a '). Prev (). Children (' img '). attr ("alt"));

The above-mentioned change of the big picture and the following descriptive text is actually done by changing the SRC attribute and the alt attribute of the element.
Break
}
}
});
Arrright.click (function () {
for (var i = 1; i < len-2; i++) {
if (Imgs.eq (i). Parent (' a '). Next (). Children (' img '). CSS (' height ') = = 18) {
Break
}
if (Imgs.eq (i). Hasclass (' Now ')) {
Imgs.eq (i). Removeclass (' Now ');
Imgs.eq (i). Parent (' a '). Next (). Children (' img '). addclass (' Now ');
Zsareaimg.attr ("src", imgs.eq (i). Parent (' a '). Next (). Children (' img '). attr ("src"));
Imgnr.text (Imgs.eq (i). Parent (' a '). Next (). Children (' img '). attr ("alt"));
Break
}
}
});
Up.click (function () {
for (var i = len-2; i > 1; i--) {
if (Imgs.eq (i). Parent (' a '). Prev (). Hasclass (' up ')) {
Break
}
Imgs.eq (i). attr ("src", imgs.eq (i). Parent (' a '). Prev (). Children (' img '). attr (' src '));
Imgs.eq (i). attr ("Alt", Imgs.eq (i). Parent (' a '). Prev (). Children (' img '). attr (' Alt '));
}
for (var i = 1; i < len-1; i++) {
if (Imgs.eq (i). Hasclass (' Now ')) {
Zsareaimg.attr ("src", imgs.eq (i). attr ("src"));
Imgnr.text (Imgs.eq (i). attr ("alt"));
}
}
});
Down.click (function (e) {
E.preventdefault ();
for (var i = 1; i < len-1; i++) {
if (Imgs.eq (i). Parent (' a '). Next (). Hasclass (' down ')) {
Break
}
Imgs.eq (i). attr ("src", imgs.eq (i). Parent (' a '). Next (). Children (' img '). attr (' src '));
Imgs.eq (i). attr ("Alt", Imgs.eq (i). Parent (' a '). Next (). Children (' img '). attr (' Alt '));
}
for (var i = 1; i < len-1; i++) {
if (Imgs.eq (i). Hasclass (' Now ')) {
Zsareaimg.attr ("src", imgs.eq (i). attr ("src"));
Imgnr.text (Imgs.eq (i). attr ("alt"));
}
}
});
});

Implement click-arrow Toggle Picture page and album scrolling