javascript - 我正在尝试构建一个 Jquery Image carousel 来更改页面上单独 div 的内容。

Question

我一直在搞很多不同的尝试，但都没有被证明是成功的。如果有人愿意，你会带我走过还是指出我正确的方向。

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

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

任何帮助将不胜感激。

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 文件中，您需要确保您最初设置了第一个信息类