Question

我希望描述文本在滑块处于活动状态时显示，目前仅在单击拇指或主图像时显示。

我需要某种主动显示：阻止div，但我不能为我的生活做出努力。

非常感谢任何帮助

干杯，

<ul class="bxslider">
  <li><a href="#" class="slide1"><img src="images/slider-images/slide1.jpg" /></a></li>
  <li><a href="#" class="slide2"><img src="images/slider-images/slide2.jpg" /></a></li>
  <li><a href="#" class="slide3"><img src="images/slider-images/slide3.jpg" /></a></li>
  <li><a href="#" class="slide4"><img src="images/slider-images/slide4.jpg" /></a></li>
</ul>

<div id="bx-pager">
  <a data-slide-index="0" class="slide1" href="#"><img src="images/slider-images/thumbnails-1.png" ></a>
  <a data-slide-index="1" class="slide2" href="#"><img src="images/slider-images/thumbnails-2.png" ></a>
  <a data-slide-index="2" class="slide3" href="#"><img src="images/slider-images/thumbnails-3.png" ></a>
  <a data-slide-index="3" class="slide4" href="#"><img src="images/slider-images/thumbnails-4.png" ></a>

</div>

.detail {
    float: left;
    margin-top: 8px;
    display:none;
    text-align: right;
    width: 845px;
}

      .bx-wrapper .bx-pager {
    bottom: -95px;
  }

  .bx-wrapper .bx-pager a {
    border: solid #ccc 1px;
    display: block;
    margin: 0 5px;
    padding: 3px;
  }

  .bx-wrapper .bx-pager a:hover,
  .bx-wrapper .bx-pager a.active {
    border: solid #5280DD 1px;
  }

  .bx-wrapper {
    margin-bottom: 120px;
  }



#bx-pager {
    margin-left: 15px;
    margin-top: -92px;
    position: absolute;
    z-index: 9999;
}

#bx-pager a {
    margin-right: 9px;
}
#bx-pager a.active img {
    border: solid 1px #ffffff;
}

.bx-wrapper {
    margin: 0 auto !important;

}
.bx-wrapper .bx-viewport {
    background: none  !important;
    border: none !important;
    box-shadow: none !important;
    left:0 !important;
}

Answer 1

阅读文档：http://bxslider.com/options#onSlideAfter

onSlideAfter

每次幻灯片转换后立即执行。

函数参数是当前的幻灯片元素（转换时）   完成）。

默认：function（）{}选项：function（$ slideElement，   oldIndex，newIndex）{//您的代码在这里}

参数：

$ slideElement：目标元素的jQuery元素

oldIndex：元素索引   上一张幻灯片（转换前）

newIndex：元素索引   目的地幻灯片（转换后）

$('.bxslider').bxSlider({
  pagerCustom: '#bx-pager',
  onSlideAfter: function($slideElement, oldIndex, newIndex) {
    var id=$($slideElement).attr('class');
    var detail="detail_"+id;
    $('.detail').hide();
    $('#'+detail).show();
  }
});

另外，请在函数中使用var关键字。省略var。

时，您正在创建全局变量

Jquery滑块在活动时显示div文本

1 个答案: