广告轮换效果

最新推荐文章于 2024-09-25 09:01:21 发布

xl597576226

最新推荐文章于 2024-09-25 09:01:21 发布

阅读量219

点赞数 1

文章标签： function xhtml div float html filter

本文链接：https://blog.csdn.net/xl597576226/article/details/5919441

版权

<!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>无标题文档</title>
<style type="text/css">
#linkBtn a
{
   text-decoration:none;
   font-size:14px;
   background:#000;
   display:block;
   width:16px;
   float:left;
   margin:5px;
   text-align:center;
   color:#FFF;

}
#container
{
   border:2px solid #999;
   width:304px;
   height:270px;
   margin:120px;
   background:url(images/01.jpg);
   position:relative;

}

#coner
{
   width:304px;
   height:30px;
   filter:alpha(opacity=50);
   background:#000;
   position:absolute;
   left:0px;
   bottom:0px;
}

#linkBtn
{
   position:absolute;
   right:0px;
   bottom:0px;
   margin-bottom:6px;
}

#title
{
   position:absolute;
   left:6px;
   bottom:0px;
   margin-bottom:6px;
}
   #title a
   {
    float:none;
    text-decoration:none;
    color:#FFF;
    font-size:14px;
   }
</style>
<script type="text/javascript">
var timeoutId;
var titiles=new Array("这是标题一","这是标题二","这是标题三","这是标题四");
var globa_index=1;
function changePic(index)
{
   window.clearTimeout(timeoutId);
   var my_container=document.getElementById("container");
my_container.style.backgroundImage="url('images/0"+index+".jpg)";
for(var i=1;i<=4;i++)
{
   var var_mytitle=document.getElementById("mytitle");
   if(i==index)
   {
    document.getElementById("item"+i).style.backgroundColor="blue";
    var_mytitle.innerHTML=titiles[index-1];
   }
   else
   {
    document.getElementById("item"+i).style.backgroundColor="black";
   }
}

}

function init()
{
    changePic(globa_index);
    timeoutId=window.setTimeout("init()",1000);
    globa_index++;
    if (globa_index==5)
    {
     globa_index=1;
    }
}
</script>
</head>

<body οnlοad="init()">
<div id="container">
   <div id="coner">

   </div>
    <div id="linkBtn">
     <a href="#" id="item1" οnmοuseοver="changePic('1')" οnmοuseοut="init()">1</a>
     <a href="#" id="item2" οnmοuseοver="changePic('2')" οnmοuseοut="init()">2</a>
     <a href="#" id="item3" οnmοuseοver="changePic('3')" οnmοuseοut="init()">3</a>
     <a href="#" id="item4" οnmοuseοver="changePic('4')" οnmοuseοut="init()">4</a>
    </div>

   <div id="title">
     <a id="mytitle" href="#">这是标题会不一样</a>
   </div>
</div>

</body>
</html>