1. 爱易网页
  2. JavaSript
  3. javascript 效果的一个小疑点

javascript 效果的一个小疑点

日期：2014-05-16　 浏览次数：20311 次

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)

相关资料更多>

  1. 小弟我在<head>里面应用很多JS文件，他们之间是可以互相访问的吗
  2. JS中三种编码模式(escape,encodeURI,encodeURIComponent)
  3. 用ajax做整站无刷新，怎么更改当前url呢
  4. Kenxu Events.js 施用
  5. 在Javascript中仿照接口（一）
  6. 兑现JavaScript继承
  7. jsp+Servlet学习（2）初始化参数
  8. 转：ExtJS 4.0 最终版公布
  9. window.parent.do()调用不了iframe父页面的步骤，求解