JS 幻灯片问题

我想把要播放的幻灯片放在上面中间的格子里左右按钮分别放在两边的格子里~
谁能帮我下~<table width="800" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td height="400"> </td>
    <td width="600"> </td>
    <td> </td>
  </tr>
</table>
<SCRIPT language=javascript type=text/javascript>

</SCRIPT><SCRIPT language=javascript src="slide.js" type=text/javascript></SCRIPT>
slide.jsdocument.write("<style type=\"text/css\">#slidearea { width:" + xsImgSize[0] + "px; height:" + xsImgSize[1] + "px; overflow: hidden; margin: 0 auto; text-align: center; } #slidearea img { width: " + xsImgSize[0] + "px; height: " + xsImgSize[1] + "px; } #slidefooter {width:" + xsImgSize[0] + "px; } </style>")
document.write("<div id=\"slidearea\">")
if (xsImgs.length != 0) {
document.write("<a href=\""+ xsImgLinks[0] +"\" target=\"_blank\"><img src=\"" + xsImgs[0] + "\" onload=\"imgLoadNotify();\" \/><\/a>")
}
document.write("<\/div>")
if (xsTextBar != 0) {
document.write("<div id=\"slidefooter\">")
if (xsPlayBtn != 0) {
   document.write("<a id=\"slideplay\" title=\"播放\" href=\""+ xsImgLinks[0] +"\">播放<\/a>")
}
if (xsImgTexts.length != 0) {
   document.write("<a id=\"slideprev\" title=\"上一幅\" href=\"#\" onclick=\"rewind();return false\"> <img border=0 src=\"images/jt-1.jpg \" /><\/a><a id=\"slidenext\" title=\"下一幅\" href=\"#\" onclick=\"forward();return false\" style=\"text-align: center; text-decoration: none;\"><img border=0 src=\"images/jt-2.jpg \" /><\/a><p id=\"slidetext\"><a href=\""+ xsImgLinks[0] +"\" target=\"_blank\">"+ xsImgTexts[0] +"<\/a><\/p>")
}
document.write("<\/div>")
}
var arrPreload = new Array();
var begImg = 0;
var arrPreload = new Array();
var spd = 2;function init()
{
    preloadRange(0,_PRELOADRANGE-1);    curImg = begImg;
    if (curImg < 0 || curImg > xsImgs.length - 1)
curImg = xsImgs.length - 1;
    changeSlide();
    setTimeout("play()", 3000)
}
var curImg = 0;
var timerId = -1;
var interval = 3500;
var imgIsLoaded = false;var current_transition = 15;
var flag = true;
var bFirst = false;
var transitions = new Array;
transitions[0] = "progid:DXImageTransform.Microsoft.Fade(duration=1)";
transitions[1] = "progid:DXImageTransform.Microsoft.Blinds(Duration=1,bands=20)";
transitions[2] = "progid:DXImageTransform.Microsoft.Checkerboard(Duration=1,squaresX=20,squaresY=20)";
transitions[3] = "progid:DXImageTransform.Microsoft.Strips(Duration=1,motion=rightdown)";
transitions[4] = "progid:DXImageTransform.Microsoft.Barn(Duration=1,orientation=vertical)";
transitions[5] = "progid:DXImageTransform.Microsoft.GradientWipe(duration=1)";
transitions[6] = "progid:DXImageTransform.Microsoft.Iris(Duration=1,motion=out)";
transitions[7] = "progid:DXImageTransform.Microsoft.Wheel(Duration=1,spokes=12)";
transitions[8] = "progid:DXImageTransform.Microsoft.Pixelate(maxSquare=10,duration=1)";
transitions[9] = "progid:DXImageTransform.Microsoft.RadialWipe(Duration=1,wipeStyle=clock)";
transitions[10] = "progid:DXImageTransform.Microsoft.RandomBars(Duration=1,orientation=vertical)";
transitions[11] = "progid:DXImageTransform.Microsoft.Slide(Duration=1,slideStyle=push)";
transitions[12] = "progid:DXImageTransform.Microsoft.RandomDissolve(Duration=1,orientation=vertical)";
transitions[13] = "progid:DXImageTransform.Microsoft.Spiral(Duration=1,gridSizeX=40,gridSizeY=40)";
transitions[14] = "progid:DXImageTransform.Microsoft.Stretch(Duration=1,stretchStyle=push)";
transitions[15] = "special case";
var transition_count = 15;var _PRELOADRANGE = 5;function preloadRange(intPic,intRange) {
var divStr = "";
for (var i=intPic; i<(intPic+intRange); i++) {
   arrPreload[i] = new Image();
   arrPreload[i].src = xsImgs[i];
}
return false;
}function imgLoadNotify()
{
    imgIsLoaded = true;
}function changeSlide(n)
{
    if (document.all)
{
   var do_transition;
   if (current_transition == (transition_count))
   {
    do_transition = Math.floor(Math.random() * transition_count);
   }
   else
   {
    do_transition = current_transition;
   }
   document.all.slidearea.style.filter=transitions[do_transition];
   document.all.slidearea.filters[0].Apply();
    }

    imgIsLoaded = false;if (xsImgs.length !=0) {
   var slideImage = "<a href=\""+ xsImgLinks[curImg] +"\" target=\"_blank\"><img border=0 src=\"" + xsImgs[curImg] + "\" onload=\"imgLoadNotify();\" /><\/a>";
   document.getElementById("slidearea").innerHTML = slideImage ;

   if (xsTextBar != 0) {
    var slideText = "<a href=\""+ xsImgLinks[curImg] +"\" target=\"_blank\">"+ xsImgTexts[curImg] +"<\/a>";
    document.getElementById("slidetext").innerHTML = slideText;
    if (xsPlayBtn != 0) {
     document.getElementById("slideplay").href = xsImgLinks[curImg];
    }
   }   if (document.all)
   {
    document.all.slidearea.filters[0].Play();
   }
}
}function forward()
{
imgIsLoaded = false;
if (!arrPreload[curImg+1])
{
   curImg++;
   if (curImg >= xsImgs.length)
   {
    curImg = 0;
   }
}
else
{
   curImg++;
   if (curImg >= xsImgs.length)
   {
    curImg = 0;
   }
}
changeSlide();
}function rewind()
{
curImg--;
if (curImg < 0)
{
   curImg = xsImgs.length-1;
}
changeSlide();
}function stop()
{
    window.clearInterval(timerId);
    timerId = -1;
    imgIsLoaded = true;
}function play()
{
    if (timerId == -1)
   timerId = window.setInterval('forward();', interval);
}
init();

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<SCRIPT language=javascript type=text/javascript>

</SCRIPT><SCRIPT language=javascript type="text/javascript">document.write("<style type=\"text/css\">#slidearea { width:" + xsImgSize[0] + "px; height:" + xsImgSize[1] + "px; overflow: hidden; margin: 0 auto; text-align: center; } #slidearea img { width: " + xsImgSize[0] + "px; height: " + xsImgSize[1] + "px; } #slidefooter {width:" + xsImgSize[0] + "px; } </style>")
document.write('<table width="800" border="1" cellspacing="0" cellpadding="0"> <tr> <td height="400" align="center">');
document.write("<a id=\"slideprev\" title=\"上一幅\" href=\"#\" onclick=\"rewind();return false\"> <img border=0 src=\"images/jt-1.jpg \" /><\/a></td>");
document.write("<td width='600'><div id=\"slidearea\">")
if (xsImgs.length != 0) {
    document.write("<a href=\"" + xsImgLinks[0] + "\" target=\"_blank\"><img src=\"" + xsImgs[0] + "\" onload=\"imgLoadNotify();\" \/><\/a>")
}
document.write("<\/div>")
if (xsTextBar != 0) {
    document.write("<div id=\"slidefooter\">")
    if (xsPlayBtn != 0) {
        document.write("<a id=\"slideplay\" title=\"播放\" href=\"" + xsImgLinks[0] + "\">播放<\/a>")
    }
    if (xsImgTexts.length != 0) {
        document.write("<p id=\"slidetext\"><a href=\"" + xsImgLinks[0] + "\" target=\"_blank\">" + xsImgTexts[0] + "<\/a><\/p>")
    }
    document.write("<\/div>")
}
document.write("</td><td align='center'><a id=\"slidenext\" title=\"下一幅\" href=\"#\" onclick=\"forward();return false\" style=\"text-align: center; text-decoration: none;\"><img border=0 src=\"images/jt-2.jpg \" /><\/a></td></tale>")var arrPreload = new Array();
var begImg = 0;
var arrPreload = new Array();
var spd = 2;function init() {
    preloadRange(0, _PRELOADRANGE - 1);    curImg = begImg;
    if (curImg < 0 || curImg > xsImgs.length - 1) curImg = xsImgs.length - 1;
    changeSlide();
    setTimeout("play()", 3000)
}var curImg = 0;
var timerId = -1;
var interval = 3500;
var imgIsLoaded = false;var current_transition = 15;
var flag = true;
var bFirst = false;var transitions = new Array;
transitions[0] = "progid:DXImageTransform.Microsoft.Fade(duration=1)";
transitions[1] = "progid:DXImageTransform.Microsoft.Blinds(Duration=1,bands=20)";
transitions[2] = "progid:DXImageTransform.Microsoft.Checkerboard(Duration=1,squaresX=20,squaresY=20)";
transitions[3] = "progid:DXImageTransform.Microsoft.Strips(Duration=1,motion=rightdown)";
transitions[4] = "progid:DXImageTransform.Microsoft.Barn(Duration=1,orientation=vertical)";
transitions[5] = "progid:DXImageTransform.Microsoft.GradientWipe(duration=1)";
transitions[6] = "progid:DXImageTransform.Microsoft.Iris(Duration=1,motion=out)";
transitions[7] = "progid:DXImageTransform.Microsoft.Wheel(Duration=1,spokes=12)";
transitions[8] = "progid:DXImageTransform.Microsoft.Pixelate(maxSquare=10,duration=1)";
transitions[9] = "progid:DXImageTransform.Microsoft.RadialWipe(Duration=1,wipeStyle=clock)";
transitions[10] = "progid:DXImageTransform.Microsoft.RandomBars(Duration=1,orientation=vertical)";
transitions[11] = "progid:DXImageTransform.Microsoft.Slide(Duration=1,slideStyle=push)";
transitions[12] = "progid:DXImageTransform.Microsoft.RandomDissolve(Duration=1,orientation=vertical)";
transitions[13] = "progid:DXImageTransform.Microsoft.Spiral(Duration=1,gridSizeX=40,gridSizeY=40)";
transitions[14] = "progid:DXImageTransform.Microsoft.Stretch(Duration=1,stretchStyle=push)";
transitions[15] = "special case";
var transition_count = 15;var _PRELOADRANGE = 5;function preloadRange(intPic, intRange) {
    var divStr = "";
    for (var i = intPic; i < (intPic + intRange); i++) {
        arrPreload[i] = new Image();
        arrPreload[i].src = xsImgs[i];
    }
    return false;
}function imgLoadNotify() {
    imgIsLoaded = true;
}function changeSlide(n) {
    if (document.all) {
        var do_transition;
        if (current_transition == (transition_count)) {
            do_transition = Math.floor(Math.random() * transition_count);
        }
        else {
            do_transition = current_transition;
        }
        document.all.slidearea.style.filter = transitions[do_transition];
        document.all.slidearea.filters[0].Apply();
    }    imgIsLoaded = false;    if (xsImgs.length != 0) {
        var slideImage = "<a href=\"" + xsImgLinks[curImg] + "\" target=\"_blank\"><img border=0 src=\"" + xsImgs[curImg] + "\" onload=\"imgLoadNotify();\" /><\/a>";
        document.getElementById("slidearea").innerHTML = slideImage;        if (xsTextBar != 0) {
            var slideText = "<a href=\"" + xsImgLinks[curImg] + "\" target=\"_blank\">" + xsImgTexts[curImg] + "<\/a>";
            document.getElementById("slidetext").innerHTML = slideText;
            if (xsPlayBtn != 0) {
                document.getElementById("slideplay").href = xsImgLinks[curImg];
            }
        }        if (document.all) {
            document.all.slidearea.filters[0].Play();
        }
    }
}function forward() {
    imgIsLoaded = false;
    if (!arrPreload[curImg + 1]) {
        curImg++;
        if (curImg >= xsImgs.length) {
            curImg = 0;
        }
    }
    else {
        curImg++;
        if (curImg >= xsImgs.length) {
            curImg = 0;
        }
    }
    changeSlide();
}function rewind() {
    curImg--;
    if (curImg < 0) {
        curImg = xsImgs.length - 1;
    }
    changeSlide();
}function stop() {
    window.clearInterval(timerId);
    timerId = -1;
    imgIsLoaded = true;
}function play() {
    if (timerId == -1) timerId = window.setInterval('forward();', interval);
}init();
</script>
</body>
</html>
以前写的一个,参考看看...<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>图片向前向后滚动浏览</title>
</head>
<style type="text/css">
span{font-family:verdana; font-size:12px; font-weight:bold; cursor:pointer; border:1px solid #CCCCCC; padding:5px; margin:5px;}
label{font-family:verdana; font-size:12px; font-weight:normal; cursor:pointer; padding:5px; margin:5px;}
.curimg{border:1px solid red; padding:1px; margin:1px; background-color:#FFFFFF;}
</style>
<body>
<table style="border:1px solid red;" width="100%"  border="0">
  <tr>
    <td align="right"><span onClick="javascript:nextPic(-1);"><< previous</span></td>
    <td align="center"><img id="bigPic01" src="http://avatar.profile.csdn.net/5/1/9/2_shenzhennba.jpg" border="0" onClick="javascript:nextPic(1);" style="cursor:pointer;"></td>
    <td align="left"><span onClick="javascript:nextPic(1);">NEXT >></span></td>
  </tr>
</table>
<br>
<table width="100%" border="0" style="border:1px solid #DDDDDD;">
  <tr>
<td id="smallPic" style="width:auto; overflow:auto;"> </td>
  </tr>
</table>
<script type="text/javascript" language="javascript">
var picstr="http://avatar.profile.csdn.net/5/1/9/2_shenzhennba.jpg,http://avatar.profile.csdn.net/8/D/0/2_an66668888.jpg";
picstr+=",http://avatar.profile.csdn.net/B/E/B/2_liuzhanjun11.jpg,http://avatar.profile.csdn.net/2/5/1/2_webadvocate.jpg";
//把每张(带路径的)图片添加到上面的字符串中,每个图片之间用逗号(,)分隔开,图片文件的名称中不能有逗号
var pics=picstr.split(","); //分解保存进数组中
var n=0; //保存当前图片的序号
function nextPic(i)
{
//FUNCTION:实现向后向前翻; i < 0 向前翻, i > 0 向后翻
var o=document.getElementById("bigPic01");
n=n+i;
if(n>=pics.length-1) n=pics.length-1;
if (n<0) n=0;if (pics[n]!="") {
o.src=pics[n];
document.getElementById("spic"+n).className="curimg";

if(n>=0&&n<pics.length-1)
document.getElementById("spic"+(n+1)).className="";

if(n<=pics.length-1&&n>0)
document.getElementById("spic"+(n-1)).className="";
}if (n==0) alert("这是第一张了");
if (n==pics.length-1) alert("这是最后一张了");
}//-------------------------------------------------------------
function displayPic(src)
{
//FUNCTION:实现点击哪张显示那张，同时设置n变量
var picSrc=src;
var sp;
var o=document.getElementById("bigPic01");
if (picSrc!="")
o.src=picSrc;
for(var k=0;k<pics.length;k++)
{
sp=document.getElementById("spic"+k);
if (sp.src==picSrc)
sp.className="curimg";
else
sp.className="";
}
}//-------------------------------------------------------------
function setSmallPic(objID)
{
//FUNCTION:建立并显示小(缩略)图片
var w=100; //缩略图宽度
var h=80; //缩略图高度
var oid=objID; //存放缩略图的容器对象的ID号;
var xStart="<img width=\""+w+"\" height=\""+h+"\" src=\"";
var xEnd=">"
var smallPics="";
for(var j=0;j<pics.length;j++)
{
if(pics[j]!=""){
if (j==0)
smallPics=smallPics+xStart+pics[j]+"\" id=\"spic"+j+"\" class=\"curimg\" onclick=\"javascript:displayPic(this.src);n=0\""+xEnd;
else
smallPics=smallPics+xStart+pics[j]+"\" id=\"spic"+j+"\" onclick=\"javascript:displayPic(this.src);n="+j+"\""+xEnd;
}
}
var objCon=document.getElementById(oid);
objCon.innerHTML=smallPics;
}
setSmallPic("smallPic");
</script>
</body>
</html>