2012-04-13 6 views
0

Ich versuche, eine Website mit mehreren Folien innerhalb einer einzelnen div zu erstellen, ohne mehr als eine URL zu laden. Ich habe die folgende Lösung gefunden, aber die switch-Anweisung funktioniert nur einmal und ich brauche es unendlich zu arbeiten. Ich habe mich gefragt, wie ich den alten Wert löschen kann, um einen neuen zu setzen.kann nicht zum nächsten Fall wechseln, nachdem 1 ausgewählt wurde

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

Es gibt keine "newset" in der HTML zur Verfügung gestellt. Was ist das? .. oder irgendeinen deiner 'id's für diese Angelegenheit. –

+0

Was meinst du "es funktioniert nur einmal"? Es wird so oft wie es heißt mit einem vernünftigen Wert-Parameter arbeiten. –

+0

newset ist die ID, die ich im Skript-Tag verwendet habe und ich meine, sobald ich einen Fall wähle bleibt es in diesem Fall und ich kann keine zweite Instanz wählen. Ich werde den gesamten Code hochladen, so dass Sie sehen können, was ich getan habe – Crosswired

Antwort

0

löschen Sie einfach das Attribut src vor Ihrem Switch:

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

switch(value) { 
... 

Möglicherweise möchten Sie das Caching alle diese Elemente irgendwo prüfen, so dass Sie nicht die DOM-10-mal jeder Funktionsaufruf zu suchen.

+0

Ihr Vorschlag hat nicht funktioniert, ich bekomme immer noch das gleiche Problem die SRC nicht klar. Ich weiß nicht, wie man einen Cache erstellt, könnten Sie das genauer erklären bitte – Crosswired

+0

@Crosswired nur 5 weitere Variablen (oder ein Array/Objekt) zu speichern, Folie, Folie2 usw. – jbabey

Verwandte Themen