本站第一个教程

1 涉及内容:
j avascript

2 方法思路
在页面中设置一个可以控制的标签,然后利用js控制innerHTML属性,就可以达到更换的目的

3 规划
用div做图片和文字的预留位置,命名id就可以用document.getElementById找到
换里面的内容可以使用innerHTML就可以更改其内容
用数组可以方便的进行添加修改数量,就用数组记录要切换的内容
编写一个函数,可以方便调用切换,这样其实还方便自动切换,用setInterval就可以,本例不用它

4 代码


<table width="300" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <!-- 图片文字框 -->
   <td><div id="pic"></div></td>
   <td><div id="txt"></div></td>
 </tr>
 <tr>
   <td> </td>
   <td>
<A HREF="j avascript:show(-1);"><img src="img/nomal.JPG" name="p" width="14" height="14" id="p" border=0/></A>
<A HREF="j avascript:show(1);"><img src="img/nomal.JPG" name="n" width="14" height="14" id="n" border=0/></A>
</td>
 </tr>
</table>
<script language="JavaScript" type="text/j avascript">
function show(i)
{
//显示某个,i为参数,让当前相加
cur+=i;
if(cur>=num)
cur=0;
if(cur<0)
cur=num-1;
mpic.innerHTML=pic[cur];
mtxt.innerHTML=txt[cur];
}
//取得对象
var pic=new Array();
var txt=new Array();
pic[0]='<img src="img/tu.jpg" width="89" height="115"/>';
txt[0]='txt';
pic[1]='<img src="img/over.jpg" width="89" height="115"/>';
txt[1]='txt111';
var num=pic.length;
var cur=0;
//取得对象
var mpic=document.getElementById("pic");
var mtxt=document.getElementById("txt");
//显示第一个
show(0);
</script>


立刻观看实例


原创内容如转载请注明:来自 阿权的书房
收藏本文到网摘
发表评论
AD
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
打开HTML 打开UBB 打开表情 隐藏
昵称   密码   游客无需密码
网址   电邮   [注册]
               

 

阅读推荐

服务器相关推荐

开发相关推荐

应用软件推荐