简明现代魔法 -> web设计理念 -> 标题与图片一起切换的 slider

标题与图片一起切换的 slider

2010-04-30

先上效果

 

 

 

 

 

 

 

 

查看本页面源代码即可获取这个效果的实现代码，下面只给出 javascript code。

var n = 0;  
var obj = document.getElementById("show_text");  
var fc = document.getElementById("fc");  
function Mea(v)
{  
	n = v;  
	setBg(v);  
	plays(v);
}
function setBg(v)
{  
	for (var i = 0; i < 4; i++)
	{  
		if (v == i)
		{  
    		obj.getElementsByTagName("li")[i].className = "act";  
            if (v == 3)
			{  
            	obj.getElementsByTagName("li")[3].style.marginTop = "-2px";
			}
			else
			{  
            	var p = obj.getElementsByTagName("li")[3].style.marginTop;  
                if (p == "-2px")
				{  
                	obj.getElementsByTagName("li")[3].style.marginTop = "0px";
				}
			}
		}
		else
		{  
   			obj.getElementsByTagName("li")[i].className = "";
		}
	}
}
function plays(v)
{  
	try
	{  
    	with (fc)
		{  
			filters[0].Apply();  
            for (var i = 0; i < 4; i++)
			{  
            	(i == v) ? children[i].style.display = "block" : children[i].style.display = "none";
			}
			filters[0].play();
		}
	} 
	catch (e)
	{  
		var d = document.getElementById("fc").getElementsByTagName("div");  
        for (var j = 0; j < 4; j++)
		{  
       		(j == v) ? d[j].style.display = "block" : d[j].style.display = "none";
		}
	}
}
function clearAuto()
{  
	clearInterval(autoStart);
}
function setAuto()
{  
	autoStart = setInterval("auto()", 2000);
}
function auto()
{  
	n++;  
	if (n >= 4) n = 0;  
    Mea(n);
}
setAuto();