Javascript image scrolling

In the past two days, I made an image scroll effect and shared it with you. The effect is very simple, but this is my first time using the JS Library (prototype1.6 ). Although the size of the referenced prototype file far exceeds the size of the code you have written, it is just learning. Using the JS library can really make the code more concise.

View examples

This is the first class, mainly responsible for the initialization and automatic playback of a slideshow. It has multiple slideitem instances and is stored in the items array.

VaR slideshow = Class. Create ({
// Width: width
// Height: Height
// Btns: button Array
// Content: content
// Options: Options
Initialize: function (width, height, btns, content, options ){
VaR self = this;
This. width = width;
This. Height = height;
This. btns = btns;
This. Length = btns. length;
This. content = content;
This. intervalid = new object ();
This. autoplaytimeout = new object ();

// Auto: automatic conversion
// Updown: up/down or left/right
// Mousetype: "click" or "Mouseover"
// Autointerval: The switching interval during automatic playback.
// Bufferstep
This. Options = {// prototype 1.6.0.2 ln1159
Auto: True,
Updown: false,
Mousetype: "click ",
Autointerval: 3000,
Bufferstep: 8,
Btnfocushandler: NULL,
Btnblurhandler: NULL
}
Object. Extend (this. Options, options || {});

This. Items = [];
This. currentindex = 0;
This. btns. Each (function (BTN, index ){
Self. Items. Push (New slideitem (self, BTN, index ));
});

This. items [0]. switchto ();
},

Autoplay: function (){
This. autoplaytimeout = setTimeout (automove, this. Options. autointerval );
VaR self = this;
Function automove (){
If (self. currentindex + 1> = self. length)
Self. items [0]. switchto ();
Else
Self. items [self. currentindex + 1]. switchto ();
}
}
});

 

This is the second class. It is a slideshow page. It mainly includes the switchto method and is responsible for the specific implementation of the conversion.

VaR slideitem = Class. Create ({
// Slideshow: slideshow instance
// BTN: button
// Index: button Index
Initialize: function (slideshow, BTN, index ){
This. slideshow = slideshow;
This. BTN = BTN;
This. Index = index;

This. Position =-Index * (this. slideshow. Options. updown? This. slideshow. Height: This. slideshow. width );
VaR self = this;
This. BTN. Observe (this. slideshow. Options. mousetype, function () {self. switchto. Apply (self, arguments )});
},

Switchto: function (){
Clearinterval (this. slideshow. intervalid );
If (this. slideshow. Options. Auto)
Cleartimeout (this. slideshow. autoplaytimeout );

If (this. slideshow. Options. btnblurhandler)
This. slideshow. Options. btnblurhandler (this. slideshow. items [This. slideshow. currentindex]. BTN );
This. slideshow. currentindex = This. index;

If (this. slideshow. Options. btnfocushandler)
This. slideshow. Options. btnfocushandler (this. BTN );

This. slideshow. intervalid = setinterval (setposition, 10 );
VaR self = this;
Function setposition (){
VaR currentposition = parseint (self. slideshow. content. getstyle (self. slideshow. Options. updown? "TOP": "Left "));
VaR targetposition = self. position;
VaR step = (targetposition-currentposition)/self. slideshow. Options. bufferstep;

If (math. Abs (STEP) <1 & step! = 0 ){
Step = (targetposition-currentposition)> 0? 1:-1;
}
Currentposition + = math. Round (STEP );

If (self. slideshow. Options. updown)
Self. slideshow. content. setstyle ({"TOP": currentposition + "PX "});
Else
Self. slideshow. content. setstyle ({"Left": currentposition + "PX "});

If (targetposition = currentposition ){
Clearinterval (self. slideshow. intervalid );
If (self. slideshow. Options. Auto)
Self. slideshow. autoplay ();
}
}
}
});

 

Note: The implementation of the easing effect draws on the methods used by cloudgamer. That is, the step size of each step is calculated based on the initial value and the target value. The larger the step size, the smaller the initial value and the smaller the target value.

Click here to download the sample