在幻灯片更改时更改目标 div 的内容 [英] Change Content of Target Div on Slide Change
问题描述
JQuery ubernoob 在这里.我正在尝试将活动幻灯片的文本放入目标 div 以实现类似的效果.
JQuery ubernoob here. I'm trying to get the text of an active slide into a target div to achieve something similar to this.
http://www.davidchipperfield.co.uk/project/valentino_new_york
我正在使用 Alvaro Trigo 的 fullPage.js 多页滑块并希望能够在每次幻灯片更改时更新单独 div 中的标题.我已经成功地使用 .appendTo 通过找到活动类来获取当前 div 并在目标 div 中显示其内容，但它只能工作一次.我觉得我很接近但真的可以在这里使用一点帮助.每次幻灯片离开后我需要使用 .empty() 吗?看起来滑块已经为当前幻灯片分配了一个活动类，这可能会使我的生活更轻松，也可能不会.或者我已经走远了，有没有更好的方法来做到这一点?
I'm using Alvaro Trigo's fullPage.js multi page slider and would like to be able to update the caption in a separate div with each slide change. I've successfully used .appendTo by finding the active class to grab a current div and display its contents in the target div but it only works once. I feel like I'm close but could really use a little help here. Do I need to use .empty() after each slide leave? It looks like the slider already assigns an active class to the current slide which may or may not make my life easier. Or am I way off and is there a better way to do this?
这是我到目前为止所得到的:
This is what I've got so far:
$(document).ready(function() {
$('#fullpage').fullpage({ slidesNavigation: true, css3:true, slidesNavigation: false,
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
$('.slide.active p').each(function(){
$(this).appendTo('#current-caption');
});
}});
});
<div id="fullpage">
<div class="section">
<div class="row">
<div class="slow-fade" data-stellar-ratio=".7">
<div class="small-centered medium-centered large-centered large-12 columns">
<h1>Portfolio</h1>
<h2>A selection of recent works.</h2>
</div>
</div>
</div>
</div> <!-- section -->
<div class="section">Some section
<div class="slide"><div class="caption active"><p>First Caption</p></div></div>
<div class="slide"><div class="caption"><p>Second Caption</p></div></div>
<div class="slide"><div class="caption"><p>Third Caption</p></div></div>
<div class="slide"><div class="caption"><p>and the 4th</p></div></div>
</div> <!-- section -->
<div class="section">Some section</div> <!-- section -->
<div class="section">Some section</div> <!-- section -->
</div>
<footer class="portfolio-footer">
<div class="footer-nav">
<div class="row">
<div class="large-3 columns">
<div id="current-caption"></div>
</div><!--large-3-->
<div class="large-6 columns">
<p> 1/5 </p>
</div><!--large-6-->
<div class="large-3 columns">
<p> Read More </p>
</div><!--large-6-->
</div><!--row-->
</div>
</div><!-- footer-nav -->
</footer><!-- portfolio-nav -->
推荐答案
查看这个 jsfiddle 以了解我如何使用 fullPage.js 创建固定页脚的完整代码，其中填充了来自每张幻灯片的信息(以 html 的形式)页脚中的三个字段，包括部分更改和幻灯片更改.
See this jsfiddle to see the full code for how I am creating a fixed footer with fullPage.js where information from each slide (in the form of html) populates three fields in the footer with both section changes and slide changes.
https://jsfiddle.net/poweredbydinoflesh/qww1kL3v/3/
<div id="fullpage">
<div class="section">
<div class="row">
<div class="slow-fade" data-stellar-ratio=".7">
<div class="caption"><p> </p></div>
<div class="page-number"><p> </p></div>
<div class="small-centered medium-centered large-centered large-12 columns">
<h1>Portfolio</h1>
<h2>A selection of recent works.</h2>
</div>
</div>
</div>
</div> <!-- section -->
<div class="section">Some section
<div class="slide"><div class="caption"><p>first caption</p></div>
<div class="page-number"><p>Lorem ipsum amet principurum</p></div></div>
<div class="slide"><div class="caption"><p>Second Caption</p></div>
<div class="page-number"><p>1/3</p></div></div>
<div class="slide"><div class="caption"><p>Third Caption</p></div>
<div class="page-number"><p>2/3</p></div></div>
<div class="slide"><div class="caption"><p>and the 4th</p></div>
<div class="page-number"><p>3/3</p></div></div>
</div> <!-- section -->
<div class="section">Some section
<div class="slide"><div class="caption"><p>1st in Second</p></div>
<div class="page-number"><p>Chlorum dolor und losicious</p></div></div>
<div class="slide"><div class="caption"><p>2nd in the new sec</p></div><div class="page-number"><p>1/3</p></div></div>
<div class="slide"><div class="caption"><p>3rd in sec</p></div><div class="page-number"><p>2/3</p></div></div>
<div class="slide"><div class="caption"><p>BOOYA!</p></div><div class="page-number"><p>3/3</p></div></div>
</div> <!-- section -->
<div class="section">Some section
<div class="slide"><div class="caption"><p>1st in 3rd section</p></div><div class="page-number"><p> </p></div></div>
<div class="slide"><div class="caption"><p>2nd in 3rd</p></div><div class="page-number"><p>1/2</p></div></div>
</div> <!-- section -->
</div>
<footer class="portfolio-footer">
<div class="footer-nav">
<div class="row">
<div class="large-3 columns">
<div class="current-caption"></div>
</div><!--large-3-->
<div class="large-6 columns">
<div class="current-page"></div>
</div><!--large-6-->
<div class="large-3 columns">
<p> Read More </p>
</div><!--large-3-->
</div><!--row-->
</div>
</div><!-- footer-nav -->
</footer><!-- portfolio-nav -->
<script>
$(document).ready(function() {
$('#fullpage').fullpage({ slidesNavigation: true, css3:true, slidesNavigation: false,
onLeave: function(index, newIndex, direction){
if (index == 0 && direction == 'down'){
var section_html = $(this).next().find(".caption").html ();
$(".current-caption").html(section_html);
var section_html = $(this).prev().find(".page-number").html ();
$(".current-page").html(section_html);
}
else if(index == 1 && direction == 'down'){
var section_html = $(this).next().find(".caption").html ();
$(".current-caption").html(section_html);
var section_html = $(this).next().find(".page-number").html ();
$(".current-page").html(section_html);
}
else if(index == 2 && direction == 'down'){
var section_html = $(this).next().find(".caption").html ();
$(".current-caption").html(section_html);
var section_html = $(this).next().find(".page-number").html ();
$(".current-page").html(section_html);
}
else if(index == 3 && direction == 'down'){
var section_html = $(this).next().find(".caption").html ();
$(".current-caption").html(section_html);
var section_html = $(this).next().find(".page-number").html ();
$(".current-page").html(section_html);
}
else if (index == 4 && direction == 'up'){
var section_html = $(this).prev().find(".caption").html ();
$(".current-caption").html(section_html);
var section_html = $(this).prev().find(".page-number").html ();
$(".current-page").html(section_html);
}
else if(index == 3 && direction == 'up'){
var section_html = $(this).prev().find(".caption").html ();
$(".current-caption").html(section_html);
var section_html = $(this).prev().find(".page-number").html ();
$(".current-page").html(section_html);
}
else if(index == 2 && direction == 'up'){
var section_html = $(this).prev().find(".caption").html ();
$(".current-caption").html(section_html);
var section_html = $(this).prev().find(".page-number").html ();
$(".current-page").html(section_html);
}
},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
var get_html = $(this).find(".caption").html ();
$(".current-caption").html(get_html);
var get_html = $(this).find(".page-number").html ();
$(".current-page").html(get_html);
}
});
});
</script>
- 非常感谢 @mancharymanchaary 帮助我以正确的方向执行此代码，并感谢 @alvaro 提供了一个出色的插件并让人们注意到 $(this) 的作用
** 我很肯定我这样做的效率可能比我能做的要低得多，但我是 jQuery 新手，所以很想知道如何才能做得更好.欢迎任何和所有想法.
** I am positive I am probably doing this in a much less efficient way than I could but I'm new to jQuery so would love to know how I can do this better. Any and all ideas are welcome.
这篇关于在幻灯片更改时更改目标 div 的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
