Question

我有一个使用bootstrap运行的滑块图像。我希望，根据显示的幻灯片，更改另一个div的CSS。

例如，如果显示幻灯片（类中的项目），我的另一个div获得50px的左边距，如果显示幻灯片2（活动），则另一个潜水获得100px左边的边距

我尝试了以下jQuery但没有成功：

if (!$('.item.one').is(':visible')) {
    $(".result").css("margin-left", "50px");
};

如果有人有任何建议，那就太棒了！提前谢谢。

- 编辑 -

这是我的Html：

<div class="carousel-inner" role="listbox">
    <div class="item one active">
        <img style="width:500px" src="assets/images/pattern/04.jpg">
    </div>
    <div class="item two">
        <img style="width:500px" src="assets/images/pattern/02.png">
    </div>
     <div class="item three">
         <img style="width:500px" src="assets/images/pattern/03.jpg">
    </div>
    <div class="item four">
        <img style="width:500px" src="assets/images/pattern/01.jpg">
    </div>
</div>
<div id="result" class="result">
    <img src="assets/images/silouhette.png" alt="Silhouette placeholder">
</div>

我从Poonan通过以下Jquery进行了更改：

if (!$('.item.one').is(':visible')) {
    $(".result").css("margin-left", "50px");
};
if (!$('.item.two').is(':visible')) {
    $(".result").css("margin-left", "150px");
};
if (!$('.item.three').is(':visible')) {
    $(".result").css("margin-left", "250px");
};
if (!$('.item.four').is(':visible')) {
    $(".result").css("margin-left", "350px");
};

这适用于罚款 - 但如果我改为第一项 - 它将css保留在Jquery的第四项中。。 ..无论如何，当我改变幻灯片时它会改变你认为???

- Bootsrap滑块设置 -

http://getbootstrap.com/javascript/#carousel

$('.carousel').carousel({
    pause: true,
    interval: false
});

Answer 1

尝试这样做（当它滑落时发生的事件）：

$('.carousel').on('slid.bs.carousel', function() {
  if ($('.item.one.active').length > 0) {
    $(".result").css("margin-left", "50px");
  };
  if ($('.item.two.active').length > 0) {
    $(".result").css("margin-left", "150px");
  };
  if ($('.item.three.active').length > 0) {
    $(".result").css("margin-left", "250px");
  };
  if ($('.item.four.active').length > 0) {
    $(".result").css("margin-left", "350px");
  };
});

查看此工作fiddle

Answer 2

检查这个演示，希望它是您搜索的内容，如果您创建一个基本但工作小提琴，那会更好。无论如何，您可以使用.hasClass("active")检查特定项目是否处于活动状态并相应地更改边距。

＆＃13;

fixMargin();

function activate(){
	$('.item').removeClass('active');
 	var item = $('#selector').val()-1;
 	$('.item:eq("'+item+'")').addClass("active");  
	fixMargin();
}

function fixMargin(){
  if ($('.item.one').hasClass("active")) {
  $(".result").css("margin-left", "50px");
  };

  if ($('.item.two').hasClass("active")) {
  $(".result").css("margin-left", "150px");
  };


  if ($('.item.three').hasClass("active")) {
  $(".result").css("margin-left", "250px");
  };

  if ($('.item.four').hasClass("active")) {
    $(".result").css("margin-left", "350px");
   };
}

＆＃13;

#selector{
  width:20px;
}
.one {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Make item<input id="selector" type="text" value='2'/>(type number 1-4) active <button onClick="activate()">now</button></br/>
<div class="carousel-inner" role="listbox">

<div class="item one active">
             <img style="width:500px" src="assets/images/pattern/04.jpg">

</div>
<div class="item two">
             <img style="width:500px" src="assets/images/pattern/02.png">

</div>

 <div class="item three">
             <img style="width:500px" src="assets/images/pattern/03.jpg">

</div>

 <div class="item four">
             <img style="width:500px" src="assets/images/pattern/01.jpg">

</div>

  </div>

    <div id="result" class="result">

        <img src="assets/images/silouhette.png" alt="Silhouette placeholder" 
       </div>

＆＃13;

Answer 3

而不是使用

if (!$('.item.one').is(':visible'))

使用

setTimeout(function() {
    if ($('.item.one').hasClass('active')){
        $(".result").css("margin-left", "50px");
    }
    if ($('.item.two').hasClass('active')){
        $(".result").css("margin-left", "50px");
    }
    if ($('.item.three').hasClass('active')){
        $(".result").css("margin-left", "50px");
    }
    if ($('.item.four').hasClass('active')){
        $(".result").css("margin-left", "50px");
    }
}, 5000); // 5000 is the default interval

如果显示特定元素，则更改另一个元素的css

3 个答案: