带滚动条的Javascript滚动横幅

问题描述：

由于我回到绘图板并重新开始，组织职位被删除。我的新代码做我想要的一切，但我确定它可以做更多。我希望这可以帮助其他PPL :)带滚动条的Javascript滚动横幅

<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>

哇，我可以借用那台时间机器吗？我也想访问1996年，好吧，认真的：我建议找到一个不同的起点，那就是真正糟糕的代码。（我可以自由地这样说，因为你说这不是你的。） – 2011-05-02 05:32:17

答

随着TJ克罗德说，它伤害了一下代码，这里的声明应该是什么样子：

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

可以说我不知道做足够的代码重做。如果你有任何想法如何让链接填入需求区域，这将是非常有用的。 – 2011-05-02 05:59:09

我不指望任何人重新为我做我的代码，但如果它真的很糟糕，并有更好的方式做到这一点，我不会阻止任何人:) – 2011-05-02 06:01:47

答

我不会试图解释所有该代码错了，但是你的主要问题是document.link.href是无效的。如果你使用这个构造（你不应该这样做），它会是document.links [0] .href（假设没有其他的锚在前面有hrefs）。相反，只需将一个ID分配给锚标记，例如（< a id ='link'>）并使用getElementById（'link'）来访问它。

你应该做的另一件事是关联你的图像和他们的链接。如果我是从头开始，我会做它在JSON，但考虑到你的代码，你可以使用一个二维数组，如：

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

这比使用两个单独的阵列更清洁，更清晰，并有助于防止计数错误。您可以通过输入图像[0]访问第一个图像对象;图像[0] [0]给你它的文件名，图像[0] [1]给你它的href。然后，我要合并loadSlide（）和loadLinks（）函数，或者我只是把它们的功能放在nextSlide（）函数中，因为它们做得很少。祝你好运。

好吧，我开始了，现在我有完整的工作代码。它占我想要的一切的95％，只是希望交叉淡入淡出效果在FF中 – 2011-05-02 10:12:31

带滚动条的Javascript滚动横幅

相关推荐