Fade JS Carousel Ads

Fade in and out of JS Carousel ads, like the Auto-play tab tab, added the fade effect.

JS Code:

function Lunbo (Contclass, Numarr, Normalclass, Hoverclass) {
function Getelementsbyclass (Searchclass,node,tag) {
var classelements = new Array ();
if (node = = null)
node = document;
if (tag = = null)
Tag = ' * ';
var els = node.getelementsbytagname (tag);
var elslen = els.length;
var pattern = new RegExp ("(^|\\s)" +searchclass+ "(\\s|$)");
for (i = 0, j = 0; i < Elslen; i++) {
if (Pattern.test (Els[i].classname)) {
CLASSELEMENTS[J] = els[i];
j + +;
}
}
return classelements;
}
var Numarray = Getelementsbyclass (Numarr),
Contarray = Getelementsbyclass (Contclass),
now = 0,
len = numarray.length;
Default first display
Numarray[0].classname = Hoverclass + ' 1 ';
Contarray[0].style.display = ' block ';
Fade in Now
function FadeIn (EL) {
el.style.opacity = 0;
El.style.filter = ' alpha (opacity = 0) ';
El.style.display = ' block ';
var n = 0;
function Fadeshow () {
if (n < 1) {
n + = 0.1;
el.style.opacity = n;
El.style.filter = ' alpha (opacity = ' +n*100+ ') ';
var Settimeid = SetTimeout (fadeshow, 50);
}else{
el.style.opacity = 1;
El.style.filter = ' alpha (opacity = 100) ';
Cleartimeout (Settimeid);
}
}
Fadeshow ();
}
Fade
function FadeOut (EL) {
el.style.opacity = 1;
El.style.filter = ' alpha (opacity = 100) ';
var n = 1;
function Fadehide () {
if (n > 0) {
n-= 0.1;
el.style.opacity = n;
El.style.filter = ' alpha (opacity = ' +n*100+ ') ';
var Settimeid = SetTimeout (Fadehide, 50);
}else{
el.style.opacity = 0;
El.style.filter = ' alpha (opacity = 0) ';
Cleartimeout (Settimeid);
El.style.display = ' None ';
}
}
Fadehide ();
}
All numbers default state
function Normalnum () {
for (var i = 0; i < len; i++) {
Numarray[i].classname = Normalclass + (i+1);
}
}
Current number hover status
function Shownum (now) {
Numarray[now].classname = Hoverclass + (now+1);
}
Auto Play
function AutoPlay () {
if (now < (len-1)) {
Normalnum ();
FadeOut (Contarray[now]);
Shownum (now + 1);
FadeIn (Contarray[now + 1]);
Now + = 1;
}else{
Normalnum ();
FadeOut (Contarray[now]);
Shownum (0);
FadeIn (Contarray[0]);
now = 0;
}
Lunbosettimeid = SetTimeout (AutoPlay, 3000);
}
Lunbosettimeid = SetTimeout (AutoPlay, 3000);
Click events
for (var i = 0; i < len; i++) {(function (i) {
Numarray[i].onclick = function () {
Cleartimeout (Lunbosettimeid);
Normalnum ();
FadeOut (Contarray[now]);
Shownum (i);
FadeIn (Contarray[i]);
now = i;
Lunbosettimeid = SetTimeout (AutoPlay, 3000);
}
}) (i)
}
}
Lunbo (' cont ', ' num ', ' num_normal ', ' num_hover ');

Parameter description:
Contclass: The class name of the carousel content;
Numarr: All number style names (additional to get the array, no style content), can also be changed to a small thumbnail image;
Normalclass: The first part of the numeric default style name, in this case the number default style is. Num_normal1 to. NUM_NORMAL5, this parameter is passed Num_normal;
Hoverclass: The first part of the numeric current style name, using a similar top default style

HTML code:

<div class= "Lunbo_box" >
    <div class= "cont" ></div>
    <div class= "cont" ></div>
    <div class= "cont" ></div>
    <div class= "cont" ></div>
    <div class= "cont" ></div>
    <ul class= "Num_ul" >
        <li class= "num num_normal1" ></li>
        <li class= "num num_normal2" ></li>
        <li class= "num num_normal3" ></li>
        <li class= "num num_normal4" ></li>
        <li class= "num NUM_NORMAL5" ></li>
    </ul>
</div>

CSS code:

div,ul,li{margin:0; padding:0; font-size:12px;}
. lunbo_box{position:relative; width:280px; height:210px; border:1px solid #666;}
. cont{Display:none; position:absolute; width:280px; height:210px; left:0; top:0;}
. cont img{width:280px; height:210px;}
. num_ul{Position:absolute; width:120px; height:20px; right:10px; bottom:10px; list-style:none;}
. num_ul li{float:left; display:inline; width:21px; height:20px;margin-left:2px; cursor:pointer; overflow:hidden;}
. num_normal1,.num_normal2,.num_normal3,.num_normal4,.num_normal5,.num_hover1,.num_hover2,.num_hover3,.num_ Hover4,.num_hover5{background-image:url (.. /images/num.gif);}
. num_normal1{background-position:0 0;}
. num_normal2{background-position:-21px 0;}
. num_normal3{background-position:-42px 0;}
. num_normal4{background-position:-63px 0;}
. num_normal5{background-position:-84px 0;}
. num_hover1{background-position:0 -20px;}
. num_hover2{background-position:-21px-20px;}
. num_hover3{background-position:-42px-20px;}
. num_hover4{background-position:-63px-20px;}
. num_hover5{background-position:-84px-20px;}

Fade JS Carousel Ads