0

我正在使用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 以显示，但我无法得到它。任何帮助将不胜感激。

4

1 回答 1

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
    });
});

RE 如果你想在 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>
于 2013-04-10T02:27:49.790 回答