JS/jQuery - 更新内容

我在WP网站上使用RoyalSlider，和大多数滑块一样，它使用overflow：hidden属性。这当然是正常的 - 但每个幻灯片的标题不能移动到滑块包装外，因为它会因溢出而被剪切。JS/jQuery - 更新内容

我想知道是否有人可以帮助我用一些JS/jQuery来更新包装器外部的div的内容与包装器中的标题内容，以便每个幻灯片移动，div外包装更新并作为真正的标题。如果这是有道理的。

这是我目前使用的滑块及其附带的jQuery（由于WP插件导致的混乱）。

提前许多感谢， R键注意，

<div class="landing-slider-container"> 
      <div id="royalslider-1" class="royalSlider default" style="width:1025px; height:600px;"> 
       <ul class="royalSlidesContainer"> 
        <li data-src="EVA-BERENDES-0263.jpg" class="royalSlide"> 
         <div class="royalHtmlContent"> 
          People &amp; Events Will Be The Decoration<br> 
          19 Feb - 16 Apr 
         </div> 
        </li> 
        <li data-src="EVA-BERENDES-0263.jpg" class="royalSlide"> 
         <div class="royalHtmlContent"> 
          People &amp; Events Will Be The Decoration<br> 
          19 Feb - 16 Apr 
         </div> 
        </li> 
       </ul> 
      </div> 

<script type="text/javascript"> 
jQuery(document).ready(function() {jQuery("#royalslider-1").royalSlider({"width":1025,"height":600,"skin":"default","preloadSkin":true,"lazyLoading":true,"preloadNearbyImages":true,"slideshowEnabled":false,"slideshowDelay":5000,"slideshowPauseOnHover":true,"slideshowAutoStart":true,"keyboardNavEnabled":true,"dragUsingMouse":false,"slideSpacing":50,"startSlideIndex":0,"imageAlignCenter":true,"imageScaleMode":"none","autoScaleSlider":false,"autoScaleSliderWidth":960,"autoScaleSliderHeight":400,"slideTransitionType":"move","slideTransitionSpeed":400,"slideTransitionEasing":"easeInOutSine","directionNavEnabled":false,"directionNavAutoHide":false,"hideArrowOnLastSlide":true,"controlNavigationType":"none","auto-generate-images":false,"auto-generate-thumbs":false,"thumb-width":60,"thumb-height":60,"captionAnimationEnabled":true,"captionShowFadeEffect":true,"captionShowMoveEffect":"movetop","captionMoveOffset":20,"captionShowSpeed":400,"captionShowEasing":"easeInOutSine","captionShowDelay":200,"controlNavEnabled":false,"captionShowEffects":["fade","movetop"]});}); 
      </script> 

       <div id="current-caption"></div>

来源

2012-08-15 John the Painter

尝试位置：绝对;在负面位置的字幕上，如顶部：-50px;左：-50px; – SMacFadyen 2012-08-16 08:14:10

是的，它已经得到了这个，但是由于它上面的包装上有'overflow：hidden'，所以文本会被剪切到里面。 – 2012-08-16 11:33:15

http://dimsemenov.com/plugins/royal-slider/documentation/#api

两个重要的事情：

的 'rsAfterSlideChange' 事件。
'currSlide'属性。

结合了两下，你可能有一些类似的结束（未经测试，从未使用过RoyalSlider，将可能需要进行调整了一下）：

sliderInstance.ev.on('rsAfterSlideChange', function() { 
    $('#current-caption').text(sliderInstance.currSlide.find('.royalHtmlContent').text()); 
});

您可以定义sliderInstance像它在文档中，或者在你初始化滑块的元素上使用jQuery风格的调用。据推测，你也可以在init中定义rsAfterSlideChange。

也就是说，SMacFadyen的建议应该可以工作，并且会成为干净利落的做法。设置位置：字幕上的绝对位置应该将其从溢出：隐藏元素中分离出来。请注意，包装不应该有位置：绝对应用，只有字幕。

来源

2012-08-16 19:43:54 cjc343

谢谢@ cjc343。我认为这确实有点超出我的专业知识;但SMacFadyen的方式绝对不行。如果父元素溢出：隐藏在其上，则无法让任何子元素显示出来。父元素是位置：相对和标题是位置：绝对，但它肯定被裁剪。尽管如此，尽管如此，你的回应:)最受赞赏。 – 2012-08-17 06:51:59

如果你可以让父母变成静态的而不是亲戚，你就可以分手了。或者，如果你可以将所有东西都包装在一个新的div中，并移动溢出：隐藏起来，你也可以分解。 http://jsfiddle.net/cjc343/ujYnk/ – cjc343 2012-08-17 18:13:28

JS/jQuery - 更新内容

回答

相关问题