标签：clear cursor 缩略图 ret 广告 pointer osi toolbar int
淡入淡出js轮播广告，写法类似自动播放的tab选项卡，加入了淡入淡出效果。
js代码：
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;
//默认第一个显示
numArray[0].className = hoverClass + ‘1‘;
contArray[0].style.display = ‘block‘;
//渐现
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();
}
//渐隐
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();
}
//所有数字默认状态
function normalNum(){
for (var i = 0; i < len; i++){
numArray[i].className = normalClass + (i+1);
}
}
//当前数字hover状态
function showNum(now){
numArray[now].className = hoverClass + (now+1);
}
//自动播放
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);
//点击事件
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‘);
参数说明：
contClass：轮播内容的class名；
numArr：所有数字样式名（附加用来获取数组的，无样式内容），也可改成小缩略图；
normalClass：数字默认样式名的前部分，如此例中数字默认样式为.num_normal1到.num_normal5，此参数传num_normal；
hoverClass：数字当前样式名的前部分，使用类似上边默认样式
html代码：
<div class="lunbo_box">
<div class="cont"><img src="images/pic1.jpg" /></div>
<div class="cont"><img src="images/pic2.jpg" /></div>
<div class="cont"><img src="images/pic3.jpg" /></div>
<div class="cont"><img src="images/pic4.jpg" /></div>
<div class="cont"><img src="images/pic5.jpg" /></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代码：
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;}
标签：clear cursor 缩略图 ret 广告 pointer osi toolbar int
原文地址：http://www.cnblogs.com/liboboweb/p/6231101.html
