Question

我正在使用http://responsive-slides.viljamis.com/，需要有标题和段落显示，并在幻灯片放映之外旋转。类似的东西：

http://www.rodale.com/smoothie-ingredients？

我不是一个JS家伙，并尝试了几个选项，没有优势。我目前的代码是：

  <script>
$(function () {

  // Slideshow
  $("#slider").responsiveSlides({
    auto: false,
    pager: false,
    nav: true,
    speed: 500,
    maxwidth: 728,
    namespace: "large-btns",
    before: function(){
        }, // Function: Before callback
    after: function(){
        $(".current").html($(".rslides").find("li#" + $("." + this.namespace +     "1_on").attr("id")).index() + 1);
    } // Function: After callback
  });
$(".total").html($(".rslides li").index() + 1);
});

我尝试为幻灯片H3和P添加DIV以显示但是我无法得到它。任何帮助将不胜感激。

Answer 1

理想情况下，您可以编辑库以将当前索引传递回after函数。尽管如此，如果你想快速修复/破解：

你可以这样做：

在这里看到jsfiddle：

http://jsfiddle.net/L5T6Y/1/

使用这样的示例html：

<div id="slide_content_body">
    <div id="slide_content_0" class="slide_content">
        <h2>Superfood Smoothies! 1</h2>
    </div>
    <div id="slide_content_1" class="slide_content" style="display: none;">
        <h2>Superfood Smoothies! 2 </h2>
    </div>
    <div id="slide_content_2" class="slide_content" style="display: none;">
        <h2>Superfood Smoothies! 3</h2>
    </div>
</div>

<div class="rslides_container">
    <ul class="rslides" id="slider1">
        <li>
            <img src="http://viljamis.com/responsive-slides/1.jpg" alt="" />
        </li>
        <li>
            <img src="http://viljamis.com/responsive-slides/2.jpg" alt="" />
        </li>
        <li>
            <img src="http://viljamis.com/responsive-slides/3.jpg" alt="" />
        </li>
    </ul>
</div>

JS：

$(function () {

    // Slideshow 1
    var boo = $("#slider1").responsiveSlides({
        auto: false,
        pager: true,
        nav: true,
        speed: 500,
        maxwidth: 800,
        before: function () {
        }, // Function: Before callback
        after: function () {
            $( '.slide_content' ).hide();
            $( '#slide_content_' + $('.rslides1_on').index() ).show();
        } // Function: After callback
    });
});

如果您希望获得li中的内容，可以这样做：

看看这个小提琴：http://jsfiddle.net/dnAC2/2/

更改js函数以执行以下操作：

 $('#slide_content_panel').html( $('.rslides1_on .content').html() );

至于html，它看起来像这样：

<div id="slide_content_panel">

</div>

<div class="rslides_container">
    <ul class="rslides" id="slider1">
        <li>
            <img src="http://viljamis.com/responsive-slides/1.jpg" alt="" />
             <div class="content" style="display: none;">
                <h2>Superfood Smoothies! 1</h2>
            </div>
        </li>
        <li>
            <img src="http://viljamis.com/responsive-slides/2.jpg" alt="" />
            <div class="content" style="display: none;">
                <h2>Superfood Smoothies! 2</h2>
            </div>
        </li>
        <li>
            <img src="http://viljamis.com/responsive-slides/3.jpg" alt="" />
            <div class="content" style="display: none;">
                <h2>Superfood Smoothies! 3</h2>
            </div>
        </li>
    </ul>
</div>

幻灯片中带有标题和标题的幻灯片

1 个答案: