淡入浅出广告

issacm4

于 2011-01-04 17:41:47 发布

阅读量116

点赞数

分类专栏： javascript 文章标签： CSS J#

本文链接：https://blog.csdn.net/issacm4/article/details/83806608

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<body>
<ul>
<li id="l1"><img src="../../images/1.gif" alt="" /></li>
<li id="l2"><img src="../../images/2.gif" alt="" /></li>
<li id="l3"><img src="../../images/3.gif" alt="" /></li>
<li id="l4"><img src="../../images/4.gif" alt="" /></li>
</ul>
<a href="javascript:show(1)" id="a1">1</a>
<a href="javascript:show(2)" id="a2">2</a>
<a href="javascript:show(3)" id="a3">3</a>
<a href="javascript:show(4)" id="a4">4</a>

</body>

<script type="text/javascript">
function show(j){

for(i=1;i<=4;i++){
if(j==i){$('#a'+j).css("color","red");$('#l'+j).fadeIn(500);}
else{$('#a'+i).css("color","black");$('#l'+i).css("display","none");}
}

}
</script>

<script src="../../js/Common/jq.js" type="text/javascript"></script>
<style type="text/css">
a{ color:Black}
ul,li,img{ margin:0; padding:0; border:0; list-style:none}
ul{ display:block; width:120px; height:120px; overflow:hidden}
ul li{ display:none; width:120px; height:120px}
#l1{ display:block}
#a1{ color:Red}
</style>

jq1.4