See Bluedream on his blog on the JavaScript imitation QQ sliding menu effect, the code is elegant, compared to highlight the next time he stole the essence of his code, hey.
"principle Brief"
HTML and CSS are the same as those in jquery, which are omitted from the image carousel effect. It is mainly a few common functions, fade and fading, which are implemented with closure. As for the logical part of the subject, very general.
"program Source"
Paste a few public functions forget, fadeIn, fade, fadeout, gradually lost
Copy Code code as follows:
function ID (name) {return document.getElementById (name);}
Traversal function
function each (arr, callback) {
if (Arr.foreach) {Arr.foreach (callback);}
else {
for (var i = 0, len = arr.length i < len; i++) Callback.call (this, arr[i), I, arr);
}
function FadeIn (elem) {
SetOpacity (elem, 0)
for (var i = 0; i < i++) {
(function () {
var pos = i * 5;
settimeout (function () {
SetOpacity (Elem, POS)
}, I * 25);
}) (i);
}
}
function fadeout (elem) {
for (var i = 0; I <= i++) {
(function () {
var pos = 100-i * 5;
settimeout (function () {
SetOpacity (Elem, POS)
}, I * 25);
}) (i);
}
}
Set transparency
function setopacity (Elem, level) {
if (elem.filters) {
Elem.style.filter = "Alpha (opacity=" + level + ")";
} else {
elem.style.opacity = level/100;
}
}
"Invoke Method"
Count: Number of pictures, Wrapid: div,ulid: Button div,infoid: Information Bar
Babyzone.scroll (count,wrapid,ulid,infoid);
Babyzone.scroll (4, "banner_list", "List", "Banner_info");
"Source Download"
/201009/yuanma/scroll_babyzone.rar