Question

我目前正在使用 jQuery Slider ：http://jsfiddle.net/hQj8a/

    $(document).ready(function() {

        $('body').removeClass('no-js');

        $('#my-carousel-2').carousel({

            itemsPerPage: 3,

            itemsPerTransition: 3,

            speed: 500,

            nextPrevLinks: false

        });

    });

当用户在分页（1,2,3）之间点击时，我希望在分页旁边显示不同的文本。所以最初在页面加载（即状态 1 ）时应该说“你好”并点击 2 ，它应该说'你好再次'和 3 它说'再见'。

有人能告诉我当前的代码是如何实现的吗？它不必“动画”，只需根据当前的分页值在文本的三位之间切换。

非常感谢您提出的任何指示： - ）

Answer 1

http://jsfiddle.net/hQj8a/5/

在jQuery中，我添加了一个span来保存文本“Hello”“Hello again”或“Goodbye”。我给了那个跨度为“addedText”的id。然后我为分页链接添加了一个事件监听器（使用chrome中的inspect元素找到了选择器），它查看单击链接的文本以确定您单击了哪个链接。在此基础上，适当填充addedText。

添加了jQuery / javascript：

$('.pagination-links').append("<span id='addedText'>Hello</span>");
var addedText = document.getElementById('addedText');

$('.pagination-links a').click(function(){
    if (this.innerHTML == '1')
        addedText.innerHTML = "Hello";
    else if (this.innerHTML == '3')
        addedText.innerHTML = "Goodbye";
    else
        addedText.innerHTML = "Hello again";
});

添加了CSS：

#addedText {
    float: left;
    padding-top: 12px; //copied from .carousel .pagination-links li a
}

编辑：默认情况下为addedText添加了“Hello”，因此它显示在页面加载上。

在jQuery Slider中的每个“幻灯片”旁边添加文本值

1 个答案: