2012-04-13 65 views
0

我試圖創建一個網站與多個幻燈片在一個單獨的股利沒有加載多個網址。我已經提出了以下解決方案,但switch語句只能工作一次,我需要它無限次地工作。我想知道如何清除舊的價值來設置新的價值;無法切換到下一個案例後選擇1

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<html> 
<head> 
<title>Rivas2</title> 

<script type= "text/javascript"> 

function changesrc(value) { 

    var sets=document.getElementById('newset'); 

    switch(value) { 

     case(1): 

     sets.src='sidescroll.js'; 
     document.getElementById('slide').src ="1.jpg"; 
     document.getElementById('slide2').src ="2.jpg"; 
     document.getElementById('slide3').src ="3.jpg"; 
     document.getElementById('slide4').src ="4.jpg"; 
     document.getElementById('slide5').src ="5.jpg"; 

     break; 

    case(2): 

    sets.src='sidescroll2.js'; 
    document.getElementById('slide').src ="a1.jpg"; 
    document.getElementById('slide2').src ="a2.jpg"; 
     document.getElementById('slide3').src ="a3.jpg"; 
     document.getElementById('slide4').src ="a4.jpg"; 
     document.getElementById('slide5').src ="a5.jpg"; 
    default: 

    } 
} 

</script> 
<script id="newset" type="text/javascript"></script> 
<style type="text/css"> 
body{ 
background-color:#66FFFF; 
} 
.banner{ 
position:absolute; 
top: 15px; 
left: 300px;} 
.sideb1{ 
position:absolute; 
top: 120px; 
left: 25px; 
height: 530px; 
width: 150px; 
overflow: auto;} 
.frame{ 
position:absolute; 
top: 120px; 
left: 400px;} 
.scroll{ 
position: absolute; 
top: 525px; 
left: 400px; 
} 

</style> 
</head> 

<body> 

<div class="banner"> 
    <img src="RPM.jpg" alt="" /> 
</div> 

<div class="sideb1" > 
    <input type = 'image' src = '1.jpg' onclick = 'changesrc(1)' width= "120" height= "100" alt= " " /><br/> House 1<br/> 
    <input type = 'image' src = 'a5.jpg' onclick = 'changesrc(2)' width= "120" height= "100" alt= " " /><br/> House 2<br/> 
    <a href="rivas2.html" ><img src="b5.jpg" width= "120" height= "100" alt="" /> </a> <br/> House 3<br/> 
    <a href="rivas3.html" ><img src="c5.jpg" width= "120" height= "100" alt="" /> </a><br/> House 4<br/> 
    <a href="rivas2.html" ><img src="d5.jpg" width= "120" height= "100" alt="" /> </a><br/> House 5<br/> 
</div> 

<div class = "frame" > 
    <img src="1.jpg" width="600" height= "400" id= "slide" alt="" /> 
</div> 

<div class="scroll"> 
    <input type = 'image' src = "image.jpg " onclick = " plus(); plus2(); plus3();  plus4(); plus5(); " width="50" height="25" alt=" " /> 
    <img src="5.jpg" width= "120" height= "100" id= "slide5" alt="" /> 
    <img src="4.jpg" width= "120" height= "100" id= "slide4" alt="" /> 
    <img src="3.jpg" width = "120" height= "100" id= "slide3" alt="" /> 
    <img src="2.jpg" width = "120" height= "100" id= "slide2" alt="" /> 
    <input type = 'image' src = "image2.jpg" onclick = "min1(); min2(); min3(); min4(); min5();" width= "50" height= "25" alt=" " /> 

</div> 

</body> 
    </html> 
+1

所提供的html中沒有'newset'。那是什麼? ..或任何你的'身份證'的事情。 – 2012-04-13 16:40:03

+0

你是什麼意思「它只能工作一次」?它將以一個合理的值參數調用多次。 – 2012-04-13 16:41:23

+0

newset是我在腳本標記中使用的標識,我的意思是一旦我選擇一個案例它停留在這種情況下,我不能選擇第二個實例。我將上傳整個代碼,以便您可以看到我已經完成的工作 – Crosswired 2012-04-13 18:40:04

回答

0

交換機之前恰好離開src屬性:

sets.src=''; 
document.getElementById('slide').src =""; 
document.getElementById('slide2').src =""; 
document.getElementById('slide3').src =""; 
document.getElementById('slide4').src =""; 
document.getElementById('slide5').src =""; 

switch(value) { 
... 

您可能需要考慮緩存所有這些元素的地方,所以你不是在搜索DOM每個函數調用10次。

+0

您的建議無效我還是得到了同樣的問題src沒有清楚。我不知道如何創建一個緩存,你可以在更詳細的文章中提到,請 – Crosswired 2012-04-13 18:08:44

+0

@Crosswired只需創建5個變量(或一個數組/對象)來存儲幻燈片,幻燈片2等。 – jbabey 2012-04-13 18:30:18

相關問題