Question

我有点问题，我无法弄明白。

我在页面上使用jquery进行了幻灯片放映。

<div id="carousel">
    <div id="round">
       <div class="box box-sec">
           <a href="#"><img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg"></a>
              <div class="carousel-caption">
                <p>
                  Peace of Mind  <span>at the best rate possible...</span>
                  <a href="#">Click here for more</a>
                </p>
              </div>
        </div>
       <div class="box box-easy">
            <a href="#"><img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg"></a>
              <div class="carousel-caption">
                <p>
                  Peace of Mind  <span>at the best rate possible...</span>
                  <a href="#">Click here for more</a>
                </p>
              </div>
        </div>
        <div class="box competitive">
            <a href="#"><img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg"></a>
              <div class="carousel-caption">
                <p>
                  Peace of Mind  <span>at the best rate possible...</span>
                  <a href="#">Click here for more</a>
                </p>
              </div>
        </div>
        <div class="box personal">
            <a href="#"><img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg"></a>
              <div class="carousel-caption">
                <p>
                  Peace of Mind  <span>at the best rate possible...</span>
                  <a href="#">Click here for more</a>
                </p>
              </div>
        </div>
        <div class="box business">
            <a href="#"><img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg"></a>
              <div class="carousel-caption">
                <p>
                  Peace of Mind  <span>at the best rate possible...</span>
                  <a href="#">Click here for more</a>
                </p>
              </div>
        </div>
        <div class="box affiliate">
            <a href="#"><img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg"></a>
              <div class="carousel-caption">
                <p>
                  Peace of Mind  <span>at the best rate possible...</span>
                  <a href="#">Click here for more</a>
                </p>
              </div>
        </div>
       <div class="arrows">
        <div class="next"><span>Test</span><img src="_includes/images/icons/rarr.png" /></div>
        <div class="prev"><span>Test</span><img src="_includes/images/icons/larr.png" /></div>
      </div>
      </div>
    </div>
    </div>

一次只有1个幻灯片处于活动状态，我想以某种方式找到下一个div的名称，并将其写入“Test”span标记，以便在悬停时显示，如果单击，则span标记将获得下一个div的名称和更新本身，这有意义吗？谢谢

添加了FIDDLE http://jsfiddle.net/TNRMk/

我试过这个没有运气

$('.arrows').click(function() {
        $(".next span").html($('.roundabout-in-focus').next().attr('name'));
        $(".prev span").html($('.roundabout-in-focus').prev().attr('name'));
    });

Answer 1

该插件提供了点击“下一个”/“上一步”按钮后执行的回调btnNextCallback和btnPrevCallback。

当前关注的项目具有班级.roundabout-in-focus。

我已经让这个 jsfiddle 让你看到了（你们所有的div都有相同的内容，所以我为了这个例子而替换了它。）

这是（注释）代码：

$(document).ready(function() {

    function updatePrevNextTitle() {

        // as this function is used as a callback for the plugin
        // 'this' is the roundabout wrapper div

        var $wrapper= $(this),

            // get the currently focused div
            $frontDiv = $wrapper.find('.roundabout-in-focus'),

            // get the next/prev div content relative to the focused div
            // also handle the circular roundabout by checking if 
            // .next() and .prev() return something, otherwise
            // get .first() and .last()
            nextContent = $frontDiv.next().length
                            ? $frontDiv.next().find('.carousel-caption').html()
                            : $frontDiv.first().find('.carousel-caption').html(),
            prevContent = $frontDiv.prev().length
                            ? $frontDiv.prev().find('.carousel-caption').html()
                            : $frontDiv.last().find('.carousel-caption').html();

        $wrapper.find('.next span').html(nextContent);
        $wrapper.find('.prev span').html(prevContent);
    };

    $('#round').roundabout({
        childSelector: 'div.box',
        btnNext: ".next",
        btnPrev: ".prev",
        // set the method updatePrevNextTitle as the callback handler
        btnNextCallback: updatePrevNextTitle,
        btnPrevCallback: updatePrevNextTitle
    }
    // set it also as the 'initialized' callback for the
    // initial setting of the prev/next span text
    ,updatePrevNextTitle);

});

Answer 2

这是一个很好的开始：

$("div.arrows div").bind("mouseover", function() {
    $("div.arrows div.next").children("span").text($("div.roundabout-in-focus").next("div").attr("class"));
    $("div.arrows div.prev").children("span").text($("div.roundabout-in-focus").prev("div").attr("class"));
});

要提出的若干要点：

当选择第一个项目时，这不适用于上一个箭头。
我不确定你想要哪个类名，所以你需要做一些修改
它需要悬停，或插件本身，因为有其他方法来控制旋转木马。因此，点击设置不会一直有效。

Answer 3

一种方法是在所选div中添加一个活动类：

//e.g. after the selection event occurs:
$('div').click(function() { 
  $(this).addClass('active'); //keep track which div is clicked with the active class

  //read the class name of the next sibling and store it in test (if i got it right)
  $(".Test").html($('.active').next().attr('class'));
});

也许不是100％正确，但可以给你一个开端！

Answer 4

根据您的jsfiddle，您的环形交叉路口缺少名称属性，试试这个：

$('.arrows').click(function() {
    $(".next span").html($('.roundabout-in-focus').next().find('.carousel-caption').html());
    $(".prev span").html($('.roundabout-in-focus').prev().find('.carousel-caption').html());
});

根据div名称更改span标记中的标题

4 个答案: