选择1后无法切换以移动到下一个案例

can't get switch to move to next case after 1 is chosen

本文关键字：移动 下一个 案例 选择      更新时间：2023-09-26

我正在尝试创建一个在单个div中具有多张幻灯片的网站，而无需加载多个URL。 我想出了以下解决方案，但是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>

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

相关文章：