幻灯片显示图像它只是在下一个按钮上工作一次

时间：2017-12-04 20:51:05

标签： javascript-events

  

我有一个标签的幻灯片放映，每个标签都由

组成      

图像集合，我有两个按钮（下一个上一个），

     

我希望当我点击下一个按钮时首先显示一组显示

的图像      

连续一行，当我点击上一个按钮显示

时      

点击下一个按钮后的一组先前图像

     
      
  1. 仅在下一个按钮中工作一次，但点击
    2.         

    prev没有工作，也没有显示以前的imgaes 

 




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

1 个答案:

答案 0 :(得分：0)

动态更改内部html将无法正常工作。 我们将实施$ReloadSlides和$AppendSlides api以便稍后动态加载新幻灯片。

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

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

相关问题
最新问题