实现下面效果！

http://www.lanrentuku.com/down/js/jiaodiantu-648/这个，可以下载

这个是带有flash的
你的那个框架是flash做的
不行
纯JS

现在就要
你用editplus写
再次感谢
不然的话不会晚上发帖

我来实现一个。
<style type="text/css">div{
margin-top:10px;
}</style><script type="text/jscript">window.onload = function(){
for(var i = 1; i <= 6; i++){
var img = document.createElement('img');
img.src = "" + i + ".jpg";
img.height = 50;
img.width = 100;
var div = document.getElementById('div' + i);
div.appendChild(img);
img.onclick = function(){
var mainDiv = document.getElementById('MainDiv');
mainDiv.firstChild.src = this.src;
}

}

var mainDiv = document.getElementById('MainDiv');
var image = document.createElement('img');
image.src = "1.jpg";
image.height = 100;
image.width = 200;
mainDiv.appendChild(image);

}</script><div>
<div style="float:left; width:100px;">
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</div>
<div style="float:left; width:200px; padding:50px;" id="MainDiv"></div>
<div style="float:left; width:100px;">
<div id="div4">
</div>
<div id="div5">
</div>
<div id="div6">
</div>
</div>
</div>

对应的图片分别是1.JPG,2.JPG,3.JPG,4.JPG,5.JPG,6.JPG。
接分了。

看看<!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>
    <title>test page</title>
    <style type="text/css">
    body {
font-size:12px;
    }
    table img{
border:solid 1px #09f;
    }
    .cur {
border:solid 1px #ff0000;
    }
    </style>
</head>
<body>
<div>
<div id="div1">
</div>
</div>
</body>

<script type="text/javascript">
var g=function(s) {
return typeof(s)=="string"?document.getElementById(s):s;
}
var getByAtt=function(att,val,doc) {
doc=doc || document;
var docs=doc.getElementsByTagName("*");
for(var i=0,els=[];i<docs.length;i++) {
if(docs[i].getAttribute(att)==val) {
els.push(docs[i]);
}
}
return els;
}
var imageViewer=function(renderTo,images) {
var tb=document.createElement("table");
for(var i=0;i<3;i++) {
tb.insertRow(i);
}
var n=0;
for(i=0;i<3;i++) {
for(var j=0;j<4;j++) {
if(j==1 && i==0) {
var center=tb.rows[i].insertCell(j);
center.rowSpan="3";
center.colsSpan="2";
center.style.cssText="width:400px;";
center.innerHTML="<img id='centerImg' cur='0' style='width:380px;height:320px' src='"+images[0]+"'/>";
} else if(j!=2 && j!=3 || (j==2 && i==0)){
var td=tb.rows[i].insertCell(j);
td.innerHTML="<img index='"+n+"' width='180px' onclick='setCur(this)' height='100px' src='"+images[n++]+"'/>";
}
}
}
tb.style.width="800px";
tb.style.height="380px";
tb.setAttribute("cellspacing","10px");
g(renderTo).appendChild(tb);

var z=0;
getByAtt("index",0,tb)[0].className="cur";
setInterval(function() {
getByAtt("index",g("centerImg").getAttribute("cur"),tb)[0].className="";
getByAtt("index",z,tb)[0].className="cur";
g("centerImg").setAttribute("cur",z++);
g("centerImg").src=images[z-1];
if(z==6)
z=0;
},3000);

setCur=function(img) {
z=img.getAttribute("index")-0;
getByAtt("index",g("centerImg").getAttribute("cur"),tb)[0].className="";
img.className="cur";
g("centerImg").setAttribute("cur",z);
g("centerImg").src=images[z];
}
};
imageViewer("div1",["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg","images/6.jpg"]);
</script>
</html>

谢谢
18楼的代码
你给的东西都是动态创建的
搞的好麻烦啊
下面是的我的固定格式
<table width="535" border="0" align="center" cellpadding="0" cellspacing="0">
                  <tr>
                    <td width="135" align="center">

                    <img id="img1" src="images/1.jpg" width="112" height="50" style="margin-top:10px;padding:1px; border:1px #B59B50 solid;" />

          <img id="img2" src="images/3.jpg" width="112" height="50" style="margin-top:10px;padding:1px; border:1px #B59B50 solid;" />

          <img id="img3" src="images/4.jpg" width="112" height="50" style="margin-top:10px;padding:1px; border:1px #B59B50 solid;" />
          </td>
                    <td><img id="LastImg" src="images/tu.jpg" width="265" height="162" /></td>
                    <td width="135" align="center">

                    <img id="img4" src="images/0.jpg" width="112" height="50" style="margin-top:10px;padding:1px; border:1px #B59B50 solid;" />

          <img id="img5" src="images/1.jpg" width="112" height="50" style="margin-top:10px;padding:1px; border:1px #B59B50 solid;" />

          <img id="img6" src="images/1.jpg" width="112" height="50" style="margin-top:10px;padding:1px; border:1px #B59B50 solid;" /></td>
                  </tr>
                </table>

换脚本代码。<script type="text/jscript">function doImage(i){
var mainDiv = document.getElementById('MainDiv');
var img = document.createElement('img');
img.src = "" + i + ".jpg";
img.height = 50;
img.width = 100;
var div = document.getElementById('div' + i);
div.appendChild(img);
img.onclick = function(){
var mainDiv = document.getElementById('MainDiv');
mainDiv.firstChild.src = this.src;
}
mainDiv.firstChild.src = img.src;
}var i = 1;
window.onload = function(){
var mainDiv = document.getElementById('MainDiv');
var image = document.createElement('img');
mainDiv.appendChild(image);
image.height = 100;
image.width = 200;

var t = setInterval(function(){
doImage(i++);
}, 1000);

if(i >= 6){
clearInterval(t);
}

}</script>

Fix Bug<script type="text/jscript">
var i = 1;
var t = null;function doImage(i){
if(i > 6){
clearInterval(t);
return;
};
var mainDiv = document.getElementById('MainDiv');
var img = document.createElement('img');
img.src = "" + i + ".jpg";
img.height = 50;
img.width = 100;
var div = document.getElementById('div' + i);
div.appendChild(img);
img.onclick = function(){
var mainDiv = document.getElementById('MainDiv');
mainDiv.firstChild.src = this.src;
}
mainDiv.firstChild.src = img.src;
}window.onload = function(){
var mainDiv = document.getElementById('MainDiv');
var image = document.createElement('img');
mainDiv.appendChild(image);
image.height = 100;
image.width = 200;

t = setInterval(function(){
doImage(i++);
}, 1000);
}</script>

完整代码示例：
<style type="text/css">div{
margin-top:10px;
}</style><script type="text/jscript">
var i = 1;
var t = null;function doImage(i){
if(i > 6){
clearInterval(t);
return;
};
var mainDiv = document.getElementById('MainDiv');
var img = document.createElement('img');
img.src = "" + i + ".jpg";
img.height = 50;
img.width = 100;
var div = document.getElementById('div' + i);
div.appendChild(img);
img.onclick = function(){
var mainDiv = document.getElementById('MainDiv');
mainDiv.firstChild.src = this.src;
}
mainDiv.firstChild.src = img.src;
}window.onload = function(){
var mainDiv = document.getElementById('MainDiv');
var image = document.createElement('img');
mainDiv.appendChild(image);
image.height = 100;
image.width = 200;

t = setInterval(function(){
doImage(i++);
}, 1000);
}</script><div>
<div style="float:left; width:100px;">
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</div>
<div style="float:left; width:200px; padding:50px;" id="MainDiv"></div>
<div style="float:left; width:100px;">
<div id="div4">
</div>
<div id="div5">
</div>
<div id="div6">
</div>
</div>
</div>

调试易

实现下面效果！

解决方案 »