Question

我正在尝试在一个div中创建一个包含多个幻灯片的网站，而不会加载多个网址。我已经提出了以下解决方案，但是switch语句只能工作一次，我需要它无限次地工作。我想知道如何清除旧值以设置新值;

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

Answer 1

在切换之前清除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次。

选择1后，无法切换到下一个案例

1 个答案: