Question

Org的帖子被删除了，因为我回到绘图板并重新开始。我的新代码完成了我想要的一切，但我相信它可以做得更多。我希望这有助于其他人：）

<head>
<script>
// Set the slideshow speed (in milliseconds)
var SlideShowSpeed = 3000;

// Set the duration of crossfade (in seconds)
var CrossFadeDuration = 3;

var Picture = new Array(); // don't change this
var Link = new Array(); // don't change this
var Left = new Array();
var Right = new Array();

Picture[1]  = '1.jpg';
Picture[2]  = '2.jpg';
Picture[3]  = '3.jpg';
Picture[4]  = '4.jpg';

Link[1]  = "This is a One";
Link[2]  = "This is a Two";
Link[3]  = "This is a Three";
Link[4]  = "This is a Four";

Left[1] = "<a href='#' onmousedown='changeLeftOne()'>Left 4</a>";
Left[2] = "<a href='#' onmousedown='changeLeftTwo()'>Left 1</a>";
Left[3] = "<a href='#' onmousedown='changeLeftThree()'>Left 2</a>";
Left[4] = "<a href='#' onmousedown='changeLeftFour()'>Left 3</a>";

Right[1] = "<a href='#' onmousedown='changeRightOne()'>Right 2</a>";
Right[2] = "<a href='#' onmousedown='changeRightTwo()'>Right 3</a>";
Right[3] = "<a href='#' onmousedown='changeRightThree()'>Right 4</a>";
Right[4] = "<a href='#' onmousedown='changeRightFour()'>Right 1</a>";

var tss;
var iss;
var jss = 1;
var pss = Picture.length-1;

var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}

function runSlideShow(){
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").href= Link[jss];
if (document.getElementById) document.getElementById("LeftBox").innerHTML= Left[jss];
if (document.getElementById) document.getElementById("RightBox").innerHTML= Right[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
jss = jss + 1;
if (jss > (pss)) jss=1;
tss = setTimeout('runSlideShow()', SlideShowSpeed);
}
function resetTime() {
    window.clearTimeout(tss);
tss = setTimeout('runSlideShow()', SlideShowSpeed);
}

function changeLeftOne() {
document.getElementById("LeftBox").innerHTML=Left[4];
document.getElementById("PictureBox").src="4.jpg";
document.getElementById("RightBox").innerHTML=Right[4];
jss = 4;
resetTime();
}
function changeLeftTwo() {
document.getElementById("LeftBox").innerHTML=Left[1];
document.getElementById("PictureBox").src="1.jpg";
document.getElementById("RightBox").innerHTML=Right[1];
jss = 1;
resetTime();
}
function changeLeftThree() {
document.getElementById("LeftBox").innerHTML=Left[2];
document.getElementById("PictureBox").src="2.jpg";
document.getElementById("RightBox").innerHTML=Right[2];
jss = 2;
resetTime();
}
function changeLeftFour() {
document.getElementById("LeftBox").innerHTML=Left[3];
document.getElementById("PictureBox").src="3.jpg";
document.getElementById("RightBox").innerHTML=Right[3];
jss = 3;
resetTime();
}
function changeRightOne() {
document.getElementById("LeftBox").innerHTML=Left[2];
document.getElementById("PictureBox").src="2.jpg";
document.getElementById("RightBox").innerHTML=Right[2];
jss = 2;
resetTime();
}
function changeRightTwo() {
document.getElementById("LeftBox").innerHTML=Left[3];
document.getElementById("PictureBox").src="3.jpg";
document.getElementById("RightBox").innerHTML=Right[3];
jss = 3;
resetTime();
}
function changeRightThree() {
document.getElementById("LeftBox").innerHTML=Left[4];
document.getElementById("PictureBox").src="4.jpg";
document.getElementById("RightBox").innerHTML=Right[4];
jss = 4;
resetTime();
}
function changeRightFour() {
document.getElementById("LeftBox").innerHTML=Left[1];
document.getElementById("PictureBox").src="1.jpg";
document.getElementById("RightBox").innerHTML=Right[1];
jss = 1;
resetTime();
}

function stopTime() {
(window.clearTimeout(tss));
}
</script>
</head>
<body onLoad="runSlideShow()" bgcolor="#FFFFFF;">
<div id="LeftBox"></div>
<a id="CaptionBox" href="T">
<div id="test2" onMouseOver="stopTime()" onMouseOut="resetTime()"> <img src="1.jpg" id="PictureBox" name="PictureBox" width="40" height="40"> </div>
</a>
<div id="RightBox"></div>
</body>

Answer 1

正如T. J. Crowder所说，查看代码会很痛苦，这里的声明应该是这样的：

var gImages = ['1.jpg', '2.jpg', '3.jpg', '4.jpg'],
    gNumberOfImages = gImages.length,
    gLink = ['google.com', 'yahoo.com' ...],
    gNumberOfLinks = gLink.length;

Answer 2

我不会尝试解释该代码的所有错误，但您的主要问题是document.link.href无效。如果你要使用那个构造（你不应该），那就是document.links [0] .href（假设在那个之前没有其他的hrefs锚点）。相反，只需为锚标记指定一个ID，例如（＆lt; a id ='link'＆gt;）并使用getElementById（'link'）来访问它。

您应该做的另一件事是关联您的图片及其链接。如果我从头开始，我会用JSON做，但是根据你的代码，你可以使用二维数组，例如：

var images = [
  ["1.jpg", "http://www.yahoo.com"],
  ["2.jpg", "http://www.google.com"],
  // etc.
];

它比使用两个独立的阵列更清晰，更清晰，它有助于防止计数错误。您可以通过键入images [0]来访问第一个图像对象; images [0] [0]为您提供文件名，图像[0] [1]为您提供其href。

然后，我要么合并loadSlide（）和loadLinks（）函数，要么我只是将它们的功能放在nextSlide（）函数中，因为它们做的很少。祝你好运。

Javascript滚动横幅/淡出

2 个答案: