您的位置：首页 > 其它

图片渐变切换效果

2011-04-01 00:39 176 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>浏览器全兼容的五屏js图片渐变切换效果丨芯晴网页特效丨CsrCode.Cn</title>
<style type="text/css">
body{margin:0;padding:0;font-size:100%;}
ol,ul{list-style:none;}
img{border:0;}
.www_zzjs_{position:relative;width:500px;height:340px;margin:10px auto 0;overflow:hidden;}
.www_zzjs_ .www_zzjs_-item{width:500px;height:340px;}
.www_zzjs_ .www_zzjs_-item,
.www_zzjs_ .www_zzjs_-item img{display:block;}
.www_zzjs_ .www_zzjs_-toggle{position:absolute;bottom:15px;right:15px;overflow:hidden;}
.www_zzjs_ .www_zzjs_-toggle li{float:left;margin-right:4px;}
.www_zzjs_ .www_zzjs_-toggle a{float:left;width:17px;height:17px;overflow:hidden;text-indent:-9999px;background:url(http://www.CsrCode.cn/html/txdm_2/images/20101102/rotator_number.png) no-repeat;}
.www_zzjs_ .www_zzjs_-toggle .no1 a{background-position:0 -17px;}
.www_zzjs_ .www_zzjs_-toggle .no1 a.current,
.www_zzjs_ .www_zzjs_-toggle .no1 a:hover{background-position:0 0;}
.www_zzjs_ .www_zzjs_-toggle .no2 a{background-position:-17px -17px;}
.www_zzjs_ .www_zzjs_-toggle .no2 a.current,
.www_zzjs_ .www_zzjs_-toggle .no2 a:hover{background-position:-17px 0;}
.www_zzjs_ .www_zzjs_-toggle .no3 a{background-position:-34px -17px;}
.www_zzjs_ .www_zzjs_-toggle .no3 a.current,
.www_zzjs_ .www_zzjs_-toggle .no3 a:hover{background-position:-34px 0;}
.www_zzjs_ .www_zzjs_-toggle .no4 a{background-position:-51px -17px;}
.www_zzjs_ .www_zzjs_-toggle .no4 a.current,
.www_zzjs_ .www_zzjs_-toggle .no4 a:hover{background-position:-51px 0;}
.www_zzjs_ .www_zzjs_-toggle .no5 a{background-position:-68px -17px;}
.www_zzjs_ .www_zzjs_-toggle .no5 a.current,
.www_zzjs_ .www_zzjs_-toggle .no5 a:hover{background-position:-68px 0;}
</style>

</head>
<body>
<div class="www_zzjs_" id="focus_bigpic" onmouseover="clearAuto()" onmouseout="setAuto()">
<a class="www_zzjs_-item" target="_blank" href="http://www.CsrCode.cn"><img alt="红叶传情" src="http://www.CsrCode.cn/images/1.jpg" /></a>
<a class="www_zzjs_-item" target="_blank" href="http://www.CsrCode.cn/"><img alt="野花绽放" src="http://www.CsrCode.cn/images/2.jpg" /></a>
<a class="www_zzjs_-item" target="_blank" href="http://www.CsrCode.cn/"><img alt="往事如茶" src="http://www.CsrCode.cn/images/3.jpg" /></a>
<a class="www_zzjs_-item" target="_blank" href="http://www.CsrCode.cn/"><img alt="油菜花开" src="http://www.CsrCode.cn/images/4.jpg" /></a>
<a class="www_zzjs_-item" target="_blank" href="http://www.CsrCode.cn/"><img alt="玫瑰情思" src="http://www.CsrCode.cn/images/5.jpg" /></a>
<ul class="www_zzjs_-toggle" id="focus_tabsbg">
<li class="no1"><a class="current" href="javascript:void(Mea(0));">1</a></li>
<li class="no2"><a href="javascript:void(Mea(1));">2</a></li>
<li class="no3"><a href="javascript:void(Mea(2));">3</a></li>
<li class="no4"><a href="javascript:void(Mea(3));">4</a></li>
<li class="no5"><a href="javascript:void(Mea(4));">5</a></li>
</ul>
</div>
<script type="text/javascript">
var n=0;
var showsTab = document.getElementById("focus_tabsbg");
var m=showsTab.getElementsByTagName("li").length;
function Mea(value){
n=value;
setBg(value);
plays(value);
}
function setBg(value){
for(var i=0;i<m;i++)
if(value==i){
showsTab.getElementsByTagName("li")[i].childNodes[0].className='current';
}
else{
showsTab.getElementsByTagName("li")[i].childNodes[0].className='';
}
}
function plays(value){
try
{
with (focus_bigpic){
filters[0].Apply();
for(i=0;i<m;i++)i==value?children[i].style.display="":children[i].style.display="none";
filters[0].play();
}
}
catch(e)
{
var d =document.getElementById("focus_bigpic").getElementsByTagName("a");
for(i=0;i<m;i++)i==value?d[i].style.display="":d[i].style.display="none";
}
}
function cons(value){
try
{
with (focus_txt){
for(i=0;i<m;i++)i==value?children[i].className="dis":children[i].className="undis";
}
}
catch(e)
{
var d = document.getElementById("focus_txt").getElementsByTagName("div");
for(i=0;i<m;i++)i==value?d[i].className="dis":d[i].className="undis";
}
}
function clearAuto(){clearInterval(autoStart)}
function setAuto(){autoStart=setInterval("auto(n)", 3000)}
function auto(){
n++;
if(n>=m)n=0;
Mea(n);
}
function sub(){
n--;
if(n<0)n=m-1;
Mea(n);
} //
setAuto();
</script>
</div>
</body>
</html>

<p align="center">本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</p>

文章由芯晴网页特效|CsrCode.CN 收集(www.CsrCode.cn) 详文参考：http://www.csrcode.cn/html/txdm/txtx/2727.htm

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航