Home > Web Front-end > JS Tutorial > body text

Native javascript implements image carousel effect code_javascript skills

WBOY
Release: 2016-05-16 18:20:20
Original
1286 people have browsed it

I saw the javascript written by BlueDream on his blog to imitate the effect of the QQ sliding menu. The code is really elegant, and the difference is highlighted by comparison. I will steal the essence of his code next time, hehe.
[Brief description of the principle]
html and css are the same as those used in JQuery to achieve the image carousel effect, so they are omitted. It is mainly a few public functions, gradually appearing and disappearing, implemented with closures. As for the main logic part, it is very general.
[Program source code]
Just post a few public functions, fadeIn, fadeout, fadeOut, fade

Copy code The code is 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 < 20; i ) {
(function() {
var pos = i * 5;
setTimeout(function() {
setOpacity(elem, pos)
}, i * 25);
})(i);
}
}
function fadeOut(elem) {
for ( var i = 0; i <= 20; 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;
}
}

[Calling method]
//count: number of pictures, wrapId: DIV that wraps the picture, ulId: button DIV, infoId: information bar
babyzone.scroll(count,wrapId,ulId,infoId);
babyzone.scroll(4,"banner_list","list","banner_info");
【Source code download】
/201009/yuanma/scroll_babyzone.rar
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template