javascript 效果的一个小疑点

2012-03-14

javascript 效果的一个小问题我想实现一个图片更换的javascript代码比方说有一个table左边的列显示图片，右

javascript 效果的一个小问题
我想实现一个图片更换的 javascript 代码
比方说有一个table 左边的列显示图片，右边的列显示图片描述。
图片间隔几秒后更换，同时图片描述也相应的更换。
同时图片要能超链接。。

刚学javascript 还不太上手，请指教。谢谢。

[解决办法]
完整代码如下，完全按照你的要求写的，并且测试通过。接！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN ">
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> Image Change... </title>

</head>

<body>
<table width= "600 " border= "0 " cellspacing= "0 " cellpadding= "0 ">
<tr>
<td width= "450 "> <img id= "imgPath " name= "imgPath " src= "images/image-1.jpg " width= "450 " height= "338 " onClick= "document.getElementById( 'imgPath ').src= 'images/image-2.jpg '; "> </td>
<td width= "150 "> <div id= "dvDes "> </div> </td>
</tr>
</table>
<script language= "JavaScript " type= "text/javascript ">

var img1=new Image();
img1.src= "images/image-1.jpg ";//图片1的路径
var img2=new Image();
img2.src= "images/image-2.jpg ";//图片2的路径
var img3=new Image();
img3.src= "images/image-3.jpg ";//图片3的路径

var imgDes=[ "This is image 1---aaaaaaaaa ", "This is image 2---bbbbbbbbb ", "This is image 3---ccccccccccccccc "];
var imgLinks=[ "1.htm ", "2.htm ", "3.htm "];

var imgPath=document.getElementById( "imgPath ");
var dvDes=document.getElementById( "dvDes ");

var index=0;

function change()
{
if(index==imgDes.length) index=0;

eval( "imgPath.src=img "+(index+1)+ ".src; ");
dvDes.innerHTML= ' <a href= " '+imgLinks[index]+ ' "> '+imgDes[index]+ ' </a> ';
index+=1;
setTimeout( "change() ",2000);
}
change();
</script>

</body>
</html>

[解决办法]
<table bgColor= "#000000 " width=50% height=200 cellspacing=1 cellpading=0 style= "table-

layout:fixed ">
<tr bgColor= "#ffffff ">
<td id=img width=55%>
</td>
<td id=desc valign=top>
</td>
</tr>
</table>
<script>

var arr=[];
var i=0;
arr[0] = [];
var len = 2; // two picture
arr[0][0] = "http://community.csdn.net/logo/images/prj.210.67.gif ";
arr[0][1] = "CSDN logo ";
arr[1] = [];
arr[1][0] = "http://image2.sina.com.cn/ty/nba/U687P6T289D1F6514DT20070102130940.jpg ";
arr[1][1] = "Basketball beauty ";
changePic();// init display pic
LoopDispPic();

function LoopDispPic()
{
setInterval( "changePic(); ",1500); // per 1.5 seconds change picture
}

function changePic()
{
if(i==2) i=0;
$( "img ").innerHTML = " <img src= ' "+arr[i][0]+ " ' border=0> ";

$( "desc ").innerText = arr[i][1];
i++;
}

function $(id)
{
return document.getElementById(id);

}

</script>
[解决办法]
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE= "JavaScript ">

</SCRIPT>

</HEAD>

<BODY>
<table width= "49% " border= "0 ">
<tr>
<td> <a href= "# " id= "imgLink "> <img src= " " border= "0 " id= "myImg "/> </a> </td>
<td id= "imgInfo "> </td>
</tr>
</table>

</BODY>
</HTML>
[解决办法]
<html>

<head>

<title> images and description </title>

<script>
var imgsrc= [ "a.gif ", "b.gif ", "c.gif "];
var descrip = [ "This is A ", "This is B ", "This is C "];
var links = [ "http://www.sina.com.cn ", "http://www.sohu.com ", "http://www.163.com "];
var n=0;

function change(){
n = (n+1)%3;
img.src = imgsrc[n];
link.href = links[n];
document.getElementById( "descript ").innerHTML=descrip[n];
}
</script>

</head>

<body onload= "setInterval(change, 3000); ">

<table border>
<tr>
<th> Image </th>
<th> Description </th>
</tr>
<tr>
<td> <a id= "link " href= "http://www.baidu.com "> <img id= "img " src= "a.gif " alt= "test1 "> </a> </img> </td>
<td> <span id= "descript "> This is A </div> </td>
</tr>
</table>
</body>

</html>

大概这个应该能用

热点排行