Question

我有一个猫头鹰传送带，上面有一个切换按钮。在旋转木马中，有一个男孩组的高尔夫球杆和一个女孩组的高尔夫球杆。我希望用户能够在2组之间切换，但是我是javascript / jquery的初学者。有人可以指出我正确的方向吗？谢谢。

<section>
<div class="input-wrap">
<input id="input-7" checked="" type="checkbox">
<label for="input-7">Select</label>
</div> 
</section>

<div class="col-xs-12">
<div class="row containerCarousel">
<div class="col-lg-8 col-md-8 col-sm-12 col-lg-offset-2 col-md-offset-2">
  <div id="home-carousel" class="owl-carousel homeCarousel">
    <div class="slide">
      <a href="#">
        <img src="images/FB/Bag-Bl@2x.jpg?$staticlink$" alt="gapr chart" class="img-responsive boy"/>
        <img src="images/FB/Bag-Pnk@2x.jpg?$staticlink$" alt="gapr chart" class="img-responsive girl"/>
      </a>
      <h3>01. WHOLE BAG</h3>
    </div>
     </div>
 </div>
 </div>
 </div>

Answer 1

这只是1个轮播，但我试图结合一个拨动开关来显示一组新图像。

我建议您然后使用data-*属性和jQuery .data()方法。并且每个.slide仅使用一张图片...然后切换src。

$("#boyGirlToggle").on("click",function(){
  // Button's text
  
  if($(this).text() == "Boys"){
    $(this).text("Girls");
    dataAttr = "girls";
  }else{
    $(this).text("Boys");
    dataAttr = "boys";
  }
  
  // Change image src.
  $(".slide img").each(function(){
    $(this).attr("src",$(this).data(dataAttr));
  });


}).trigger("click");

$("#home-carousel").owlCarousel({
  loop:true,
  margin:10,
  nav:true,
  responsive:{
    0:{
        items:1
    },
    600:{
        items:3
    },
    1000:{
        items:5
    }
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<section>
  <div class="input-wrap">
    <input id="input-7" checked="" type="checkbox">
    <label for="input-7">Select</label>
  </div> 
</section>

<br>
<button id="boyGirlToggle">Girls</button><br>
<br>

<div class="col-xs-12">
  <div class="row containerCarousel">
    <div class="col-lg-8 col-md-8 col-sm-12 col-lg-offset-2 col-md-offset-2">
      <div id="home-carousel" class="owl-carousel homeCarousel">
        <div class="slide">
          <a href="#">
            <img data-boys="https://via.placeholder.com/200x200?text=boys1" alt="gapr chart" class="img-responsive boy" data-girls="https://via.placeholder.com/200x200?text=girls1"/>
          </a>
          <h3>01. IMAGE</h3>
        </div>
        <div class="slide">
          <a href="#">
            <img data-boys="https://via.placeholder.com/200x200?text=boys2" alt="gapr chart" class="img-responsive boy" data-girls="https://via.placeholder.com/200x200?text=girls2"/>
          </a>
          <h3>02. IMAGE</h3>
        </div>
        <div class="slide">
          <a href="#">
            <img data-boys="https://via.placeholder.com/200x200?text=boys3" alt="gapr chart" class="img-responsive boy" data-girls="https://via.placeholder.com/200x200?text=girls3"/>
          </a>
          <h3>03. IMAGE</h3>
        </div>
        <div class="slide">
          <a href="#">
            <img data-boys="https://via.placeholder.com/200x200?text=boys4" alt="gapr chart" class="img-responsive boy" data-girls="https://via.placeholder.com/200x200?text=girls4"/>
          </a>
          <h3>04. IMAGE</h3>
        </div>
        <div class="slide">
          <a href="#">
            <img data-boys="https://via.placeholder.com/200x200?text=boys5" alt="gapr chart" class="img-responsive boy" data-girls="https://via.placeholder.com/200x200?text=girls5"/>
          </a>
          <h3>05. IMAGE</h3>
        </div>
      </div>
    </div>
  </div>
</div>

以整页模式查看...;）

使用onclick切换2个滑块

1 个答案: