jquery - 如何制作一个 JQuery 滑块

Question

这就是我的想法：有四个图像，当单击一个时，一个面板会显示一些我想要的信息。当我单击另一张图片时，旧面板会消失，而新面板会在同一位置打开。我试过这样的事情：

$(document).ready(function(){
  $("#img1").click(function(){
    $("#panel").show("slow");
  });
});

<div id="panel1">
<img src="images/image1">
Some text
</div>

<img id="img1" src="some image">
<img id="img2" src="some image">

...

但是这样，当我单击第二张图像时，旧面板不会消失，新面板会在第一个图像下打开。

Answer 1

尝试这个：

给每个 CSS.panel类panel：

<div id="panel1" class='panel'>
<div id="panel2" class='panel'>
...........

然后hide the panelid和show the corresponding panel：

$("#img1").click(function(){
   $('.panel').slideUp();
   $("#panel1").show('slow');
});

$("#img2").click(function(){
   $('.panel').slideUp();
   $("#panel2").show('slow');
});

Answer 2

用这个 ：

    $(document).ready(function(){
    $("#img1").click(function(){
    $(".image:visible").hide();
    $("#panel").show("slow");
  });
});

Answer 3

当您不命令旧面板关闭时，您怎么能期望它关闭呢？

这是我要做的（未经测试）：

$(document).ready(function () {
  $('img').click(function () {
    var img = $(this);
    var panel = $('#panel');
    panel.hide();
    panel.html(img.data('info'));
    panel.show('slow');
  })
});

html部分：

<img src="img1.jpg" data-info="information for the image" />
<img src="img2.jpg" data-info="information for the image" />
<img src="img3.jpg" data-info="information for the image" />
<div id="panel"></div>