0

複数の URL を読み込まずに、1 つの div 内に複数のスライドを含む Web サイトを作成しようとしています。次の解決策を思いつきましたが、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>
4

1 に答える 1

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回検索しないように、これらすべての要素をどこかにキャッシュすることを検討することをお勧めします。

于 2012-04-13T17:22:18.060 に答える