myimage1、myimage2、myimage3 の 3 つのイメージがあります。各画像をクリックすると、slides-slider、slider2、およびslider3のセットが取得され、それぞれcontainer1、container2、およびcontainer2にあります.これは私の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 をクリックした場合も同様です。なぜこれが起こっているのですか?それを修正するにはどうすればよいですか?