javascript - 我正在尝试构建一个 Jquery Image 轮播，它可以更改页面上单独 div 的内容。

Question

我一直在尝试大量不同的尝试，但都没有成功。如果有人愿意，您可以引导我完成任务还是为我指明正确的方向。

我正在使用 http://sorgalla.com/projects/jcarousel/ Jcarousel 作为页面顶部的图像轮播，一次显示 3 张图像。

我正在通过链接 http://tamarackcellars.com/ 寻找类似的东西但是当您单击其中一种 Wine 时，页面底部的内容会发生变化，而不是将整个页面加载到新页面。

如有任何帮助，我们将不胜感激。

Answer 1

好的，我假设你可以让轮播插件工作，如果不能让我知道。

如果我没理解错的话，您希望页面内容发生变化而不是重定向。如果这是静态内容，那么您想要的就相对简单，可以通过多种方式解决。

首先设置您的旋转木马，并为每个图像或内容赋予相同的类，例如 class="carouselObj"。然后在同一页面上创建一个容器，该容器将保存关于轮播的每个元素的不同信息。

<div id="container">
   <div class="info">1st image info</div>
   <div class="info">2nd image info</div>
   <div class="info">3rd image info</div>
   <div class="info">4th image info</div>
</div>

现在要添加一些 jquery 以使其发挥作用。这里的想法是，当其中一个图像通过单击或定时事件发生变化时，容器中的相应信息也会发生变化。这里有一些代码可以为您提供思路。

$('.carouselObj').click(function(){
var index = $('.carouselObj').index(this); // gets the index of carousell image clicked
$('.info').eq(index).show().siblings('.info').hide(); // shows the corrosponding element and hides the others.
});

现在在 css 文件中你需要确保你最初设置了第一个信息类