Question

嗨我有三张图片在页面加载时加载，当我点击图片时，旋转木马会出现在它的位置。但目前所有图像都显示轮播。

我真正想要的是，当您点击特定图像时，轮播必须仅针对该图像出现（轮播取代该图像），然后当您点击另一张图像（不在轮播中）时，则当前轮播必须消失，下一个轮播显示在用户点击的另一个图像上。如果用户单击已出现的轮播，则会返回到最初的图像。因此，实际上，当用户点击其中一个图像时，必须显示一个轮播。

以下是代码：我似乎无法让它在这里工作，但它在jsFiddle工作（我在这里做错了什么？）

$(function() {
  $("#div2, #div4, #div6").hide();
  $("#div1, #div2, #div3, #div4, #div5, #div6").on("click", function() {
    $("#div1, #div2, #div3, #div4, #div5, #div6").toggle();
  });
});
$('.carousel-one').slick({
  arrows: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  centerMode: true,
  variableWidth: true,
  autoplay: true,
  autoplaySpeed: 2000
});

<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<div id="div1"><img src="http://lorempixel.com/600/200" alt="Image three"></div>
<div id="div2">
  <div class="carousel-one">
    <div><img src="http://lorempixel.com/400/200" alt="Image three"></div>
    <div><img src="http://lorempixel.com/400/200" alt="Image one"></div>
    <div><img src="http://lorempixel.com/300/200" alt="Image two"></div>
    <div><img src="http://lorempixel.com/320/200" alt="Image four"></div>
    <div><img src="http://lorempixel.com/400/200" alt="Image five"></div>
    <div><img src="http://lorempixel.com/200/200" alt="Image seven"></div>
    <div><img src="http://lorempixel.com/300/200" alt="Image six"></div>
  </div>
</div>
<div id="div3"><img src="http://lorempixel.com/600/200" alt="Image three"></div>
<div id="div4">
  <div class="carousel-one">
    <div><img src="http://lorempixel.com/400/200" alt="Image three"></div>
    <div><img src="http://lorempixel.com/400/200" alt="Image one"></div>
    <div><img src="http://lorempixel.com/300/200" alt="Image two"></div>
    <div><img src="http://lorempixel.com/320/200" alt="Image four"></div>
    <div><img src="http://lorempixel.com/400/200" alt="Image five"></div>
    <div><img src="http://lorempixel.com/200/200" alt="Image seven"></div>
    <div><img src="http://lorempixel.com/300/200" alt="Image six"></div>
  </div>
</div>
<div id="div5"><img src="http://lorempixel.com/600/200" alt="Image three"></div>
<div id="div6">
  <div class="carousel-one">
    <div><img src="http://lorempixel.com/400/200" alt="Image three"></div>
    <div><img src="http://lorempixel.com/400/200" alt="Image one"></div>
    <div><img src="http://lorempixel.com/300/200" alt="Image two"></div>
    <div><img src="http://lorempixel.com/320/200" alt="Image four"></div>
    <div><img src="http://lorempixel.com/400/200" alt="Image five"></div>
    <div><img src="http://lorempixel.com/200/200" alt="Image seven"></div>
    <div><img src="http://lorempixel.com/300/200" alt="Image six"></div>
  </div>
</div>

因此，当用户点击其中一张图片时，基本上应该在任何给定时间激活一个轮播。

Answer 1

有很多不同的方法可以解决这个问题，这个解决方案肯定不是防弹的。这应该可以帮助你掌握这个概念：

使用javascript定位类并不错，但您需要掌握以下概念：

$(this).hide();

指的是已点击的当前元素。

http://jsfiddle.net/5rtce4ov/

显示一次隐藏一个DIV点击

1 个答案: