帶滾動條的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>

來源

2011-05-02 webmaster alex l

哇，我可以借用那臺時間機器嗎？我也想訪問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:40:01 qwertymk

可以說我不知道做足夠的代碼重做。如果你有任何想法如何讓鏈接填入需求區域，這將是非常有用的。 – 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（）函數中，因爲它們做得很少。祝你好運。

來源

2011-05-02 07:15:23 squidbe

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

帶滾動條的Javascript滾動橫幅

回答

相關問題