幻灯片放映图像，它只在下一个按钮上工作一次答案

【问题标题】：Slide show images it just working one time on next button幻灯片放映图像，它只在下一个按钮上工作一次
【发布时间】：2017-12-04 20:51:04
【问题描述】：

我有一个标签一致的幻灯片放映，每个标签由
组成图像集合，我有两个按钮（下一个上一个），我想当我点击下一个按钮时首先显示一组图像全部连续，当我单击上一个按钮时显示单击下一步按钮后的一组先前图像。

仅在下一个按钮中一次可以正常工作，但在单击时 prev 不起作用，并且不显示以前的图像集。

<script type="text/javascript">
    var cjssor=0;
    var ele;
    var ejssor=["jssor_1","jssor_2","jssor_3","jssor_4"];
       var`ljssor=document.getElementById("txt")           
           .getElementsByClassName("jssor").length;`
    function next(n)
    {
    cjssor+=1;                 
    if(cjssor>=ljssor)
    {        
    cjssor=0;
    }
    ele=document.getElementById("txt").innerHTML=ejssor[cjssor];  
    $(document).ready(function() {
    var jssor_1_slider = new $JssorSlider$(ele);
    });
    }

    function previous(m){
    cjssor-=1;        
    ctc=document.getElementById("kk").innerHTML=ejssor[cjssor];
    $(document).ready(function() {  
    var jssor_1_slider = new $JssorSlider$(ctc);
    });
    }
    </script>

    <script type="text/javascript">
        $(document).ready(function() {
        var jssor_1_slider = new $JssorSlider$("jssor_1");
           });
           </script>
          <body>
<a class="next" id="next" onclick="next(1)">&#10095;</a>
<a class="prev" id="prev" onclick="previous(1)">&#10094;</a>
<!--------------------------------jssor1--------------------------->
<div id="jssor_1"  class="jssor" style="position:absolute;margin:0 
   auto;top:60px;left:160px;width:800px;height:380px;overflow:hidden;        
   visibility:hidden;">
    <!-- Loading Screen -->
   <div data-u="loading" class="jssorl-009-spin" 
    style="position:absolute;top:0px;left:0px;width:100%;        
    height:100%;text- align:center;background-color:rgba(0,0,0,0.7);">

    <img style="margin-top:-19px;position:relative;top:50%;
      width:38px;height:38px;" src="img/spin.svg" />
    </div>
    <div data-u="slides" style="cursor:default;position:relative;top:0px;
       left:0px;width:800px;height:380px;overflow:hidden;">
        <div>
            <img data-u="image" src="img/01.jpg" />
            <div data-u="thumb">
                <img data-u="thumb" class="i" src="img/022-s96x48.jpg" />
                <span class="ti">Title</span><br />
                <span class="d">Slide Description</span>
            </div>
        </div>
        <div>
            <img data-u="image" src="img/02.jpg" />
            <div data-u="thumb">
                <img data-u="thumb" class="i" src="img/023-s96x48.jpg" />
                <span class="ti">Title</span><br />
                <span class="d">Slide Description</span>
            </div>
        </div>
        <div>
            <img data-u="image" src="img/03.jpg" />
            <div data-u="thumb">
                <img data-u="thumb" class="i" src="img/024-s96x48.jpg" />
                <span class="ti">Title</span><br />
                <span class="d">Slide Description</span>
            </div>
        </div>
        <div>
            <img data-u="image" src="img/04.jpg" />
            <div data-u="thumb">
                <img data-u="thumb" class="i" src="img/025-s96x48.jpg" />
                <span class="ti">Title</span><br />
                <span class="d">Slide Description</span>
            </div>
        </div>
        <div>
            <img data-u="image" src="img/05.jpg" />
            <div data-u="thumb">
                <img data-u="thumb" class="i" src="img/026-s96x48.jpg" />
                <span class="ti">Title</span><br />
                <span class="d">Slide Description</span>
            </div>
        </div>
        <div>
            <img data-u="image" src="img/06.jpg" />
            <div data-u="thumb">
                <img data-u="thumb" class="i" src="img/027-s96x48.jpg" />
                <span class="ti">Title</span><br />
                <span class="d">Slide Description</span>
            </div>
        </div>
     </div>

     <!--------------------------------jssor2--------------------------->
     <div id="jssor_2"  class="jssor" style="position:absolute;margin:0 
      auto;top:60px;left:160px;width:800px;height:380px;overflow:hidden; 
      visibility: hidden;">
       <!-- Loading Screen -->
       <div data-u="loading" class="jssorl-009-spin" 
       style="position:absolute;top:0px;left:0px;width:100%;        
       height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
       <img style="margin-top:-19px;position:relative;top:50%;
        width:38px;height:38px;" src="img/spin.svg" />
        </div>
        <div data-u="slides" style="cursor:default;position:relative;    
        top:0px ; left:0px;width:800px;height:380px;overflow:hidden;">
        <div>
        <img data-u="image" src="img/07.jpg" />
            <div data-u="thumb">
                <img data-u="thumb" class="i" src="img/022-s96x48.jpg" />
                <span class="ti">Title</span><br />
                <span class="d">Slide Description</span>
            </div>
        </div>
        <div>
            <img data-u="image" src="img/08.jpg" />
            <div data-u="thumb">
                <img data-u="thumb" class="i" src="img/023-s96x48.jpg" />
                <span class="ti">Title</span><br />
                <span class="d">Slide Description</span>
            </div>
        </div>
        <div>
            <img data-u="image" src="img/09.jpg" />
            <div data-u="thumb">
                <img data-u="thumb" class="i" src="img/024-s96x48.jpg" />
                <span class="ti">Title</span><br />
                <span class="d">Slide Description</span>
            </div>
        </div>
        <div>
            <img data-u="image" src="img/10.jpg" />
            <div data-u="thumb">
                <img data-u="thumb" class="i" src="img/025-s96x48.jpg" />
                <span class="ti">Title</span><br />
                <span class="d">Slide Description</span>
            </div>
        </div>
        <div>
            <img data-u="image" src="img/11.jpg" />
            <div data-u="thumb">
                <img data-u="thumb" class="i" src="img/026-s96x48.jpg" />
                <span class="ti">Title</span><br />
                <span class="d">Slide Description</span>
            </div>
        </div>
        <div>
            <img data-u="image" src="img/12.jpg" />
            <div data-u="thumb">
                <img data-u="thumb" class="i" src="img/027-s96x48.jpg" />
                <span class="ti">Title</span><br />
                <span class="d">Slide Description</span>
            </div>
        </div>            
    </div>

<!--------------------------------jssor3--------------------------->

 <div id="jssor_3" class="jssor" style="position:absolute;margin:0 
  auto;top:60px;left:160px;width:800px;height:380px;overflow:hidden;  
   visibility: hidden;">
    <!-- Loading Screen -->
    <div data-u="loading" class="jssorl-009-spin" 
     style="position:absolute;top:0px;left:0px;width:100%;height:100%;     
     text-align:center;background-color:rgba(0,0,0,0.7);">
     <img style="margin-top:-19px;position:relative;top:50%;
      width:38px;height:38px;" src="img/spin.svg" />
    </div>
    <div data-u="slides" style="cursor:default;position:relative;top:0px;
     left:0px;width:800px;height:380px;overflow:hidden;">
        <div>
            <img data-u="image" src="img/13.jpg" />
            <div data-u="thumb">
                <img data-u="thumb" class="i" src="img/022-s96x48.jpg" />
                <span class="ti">Title</span><br />
                <span class="d">Slide Description</span>
            </div>
        </div>
        <div>
            <img data-u="image" src="img/14.jpg" />
            <div data-u="thumb">
                <img data-u="thumb" class="i" src="img/023-s96x48.jpg" />
                <span class="ti">Title</span><br />
                <span class="d">Slide Description</span>
            </div>
        </div>
        <div>
            <img data-u="image" src="img/15.jpg" />
            <div data-u="thumb">
                <img data-u="thumb" class="i" src="img/024-s96x48.jpg" />
                <span class="ti">Title</span><br />
                <span class="d">Slide Description</span>
            </div>
        </div>
        <div>
            <img data-u="image" src="img/16.jpg" />
            <div data-u="thumb">
                <img data-u="thumb" class="i" src="img/025-s96x48.jpg" />
                <span class="ti">Title</span><br />
                <span class="d">Slide Description</span>
            </div>
        </div>
        <div>
            <img data-u="image" src="img/17.jpg" />
            <div data-u="thumb">
                <img data-u="thumb" class="i" src="img/026-s96x48.jpg" />
                <span class="ti">Title</span><br />
                <span class="d">Slide Description</span>
            </div>
        </div>
        <div>
            <img data-u="image" src="img/18.jpg" />
            <div data-u="thumb">
                <img data-u="thumb" class="i" src="img/027-s96x48.jpg" />
                <span class="ti">Title</span><br />
                <span class="d">Slide Description</span>
            </div>
        </div>            
    </div>

<!--------------------------------jssor4--------------------------->

  <div id="jssor_4"  class="jssor" style="position:absolute;margin:0 
   auto;top:60px;left:160px;width:800px;height:380px;overflow:hidden;
    visibility:hidden;">
    <!-- Loading Screen -->
    <div data-u="loading" class="jssorl-009-spin" 
    style="position:absolute;top:0px;left:0px;width:100%;height:100%;
    text-align:center;background-color:rgba(0,0,0,0.7);">
        <img style="margin-top:-19px;position:relative;top:50%;
     width:38px;height:38px;" src="img/spin.svg" />
    </div>
    <div data-u="slides" style="cursor:default;position:relative;top:0px;
    left:0px;width:800px;height:380px;overflow:hidden;">
        <div>
            <img data-u="image" src="img/19.jpg" />
            <div data-u="thumb">
                <img data-u="thumb" class="i" src="img/022-s96x48.jpg" />
                <span class="ti">Title</span><br />
                <span class="d">Slide Description</span> 
           </div>
        </div>
        <div>
            <img data-u="image" src="img/20.jpg" />
            <div data-u="thumb">
                <img data-u="thumb" class="i" src="img/023-s96x48.jpg" />
                <span class="ti">Title</span><br />
                <span class="d">Slide Description</span>
            </div>
        </div>
        <div>
            <img data-u="image" src="img/21.jpg" />
            <div data-u="thumb">
                <img data-u="thumb" class="i" src="img/024-s96x48.jpg" />
                <span class="ti">Title</span><br />
                <span class="d">Slide Description</span>
            </div>
        </div>
        <div>
            <img data-u="image" src="img/22.jpg" />
            <div data-u="thumb">
                <img data-u="thumb" class="i" src="img/025-s96x48.jpg" />
                <span class="ti">Title</span><br />
                <span class="d">Slide Description</span>
            </div>
        </div>
        <div>
            <img data-u="image" src="img/23.jpg" />
            <div data-u="thumb">
                <img data-u="thumb" class="i" src="img/026-s96x48.jpg" />
                <span class="ti">Title</span><br />
                <span class="d">Slide Description</span>
            </div>
        </div>
        <div>
            <img data-u="image" src="img/24.jpg" />
            <div data-u="thumb">
                <img data-u="thumb" class="i" src="img/027-s96x48.jpg" />
                <span class="ti">Title</span><br />
                <span class="d">Slide Description</span>
            </div>
        </div>            
    </div>

【问题讨论】：

请更新您的代码 sn-ps。它们似乎没有按您预期的方式显示。

标签： javascript dom-events

【解决方案1】：

动态更改内部 html 将不起作用。稍后我们将实现$ReloadSlides 和$AppendSlides api 来动态加载新幻灯片。

对于你目前的情况，我认为你可以创建一个新的滑块并在鼠标单击时隐藏以前的滑块。

请注意，在显示另一个滑块之前，您可以$Pause 并隐藏上一个滑块的元素。

【讨论】：