如何制作JQuery滑块

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

$(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">

...

$（文档）.ready（函数（）{
$（“#img1”）。单击（函数（）{
美元（“#面板”）。显示（“慢”）；
});
});
一些文本
...

但通过这种方式，当我点击第二个图像时，旧面板不会消失，新面板会在第一个图像下打开。

使用以下方法：

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

---

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

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

html部分：

试试这个：

为每个

面板提供一个css类
.panel
：

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

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

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

你能发布你的HTML吗？这取决于你喜欢显示什么以及如何显示。最近，我创建了一个加载动态内容的滑块。但是我不喜欢将每一项都预先加载到html中，所以我使用slider+jQueryAjax将内容加载到
div
中。可能会显示您的html以及您喜欢显示的内容和显示方式，（例如）@mattytomo我已经添加了html
<div id="panel1" class='panel'>
<div id="panel2" class='panel'>
...........

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

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