0

我有 3 张图片-myimage1、myimage2 和 myimage3。当我单击每个图像时，我会得到一组幻灯片滑块、滑块 2 和滑块 3，它们分别位于容器 1、容器 2 和容器 2 中。这是我的 HTML：

    <div id="right">
    <img id="myimage1" onclick="changeimage1()"  src="images/build_i.png"  />
    <img id="myimage2" onclick="changeimage2()"  src="images/apply_i.png"  />
    <img id="myimage3" onclick="changeimage3()"  src="images/learn_i.png"  />
    </div> 
     <div id="PicInRight"> <div id="container1" > <div id="slider" > <ul><li><img      id="Img" src='slide_intro.png'/></li></ul> </div></div> <div id="container2"> <div id="slider2" > <ul><li><img id="Img" src='slide1.png' /></li></ul> </div></div> <div id="container3"> <div id="slider3" > <ul><li><img id="Img" src='slide1.png' /></li></ul> </div> </div></div>

在头部，我隐藏了里面有幻灯片的容器。

    <script type="text/javascript">
    $(document).ready(function(){   
    $("#container1").hide();
    $("#container2").hide();
    $("#container3").hide();
    });
     </script>

在我的 Javascript 中，点击功能如下所示：

      function changeimage1()
     {

    $("#container2").hide();
    $("#container3").hide();
    $("#container1").show();
    $("#slider").easySlider({
            auto: false, 
            continuous: true
        });
        }

myimage1 和 myimage2 以此类推。

    function changeimage2()
    {   $("#container1").hide();
    $("#container3").hide();
    $("#container2").show();


        $("#slider2").easySlider({
            auto: false, 
            continuous: true
        });
    }

     function changeimage3()
    {           
$("#container1").hide();
    $("#container2").hide();
$("#container3").show();
$("#slider3").easySlider({
            auto: false, 
            continuous: true
        });
}

现在，只有当我先单击 myimage3 时，它才能正常工作。滑块显示并且工作正常。当我稍后单击 image1 和 image2 时，它们也可以工作。但是，如果我先单击 myimage1，则只有第一个滑块起作用。当我稍后单击 myimage2 和 myimage3 时，container2 和 3 中的滑块仅显示，但不会在单击下一个和上一个时切换！如果我先单击 myimage2，则类似情况。为什么会发生这种情况，我应该怎么做才能纠正它？

4

0 回答 0