0

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

我需要某种活动显示：在 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;
}
4

1 回答 1

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.

于 2013-09-09T03:41:40.587 回答