jquery - 如何在 3 个元素上循环上课

标签 jquery html css jcarousellite

我正在使用 jCarouselLite在 3 个元素之间循环。我已经设置了插件来做到这一点,包括 3x .bulletX 滑动到每个元素,即元素符号 1 滑动到元素 1,等等。

然而,我想要的是在 .bulletX 上循环类 .active 以指定显示哪个元素,类似于 nivoslider。

<div class="bullet1">If this is clicked, is leads to element1</div>
<div class="bullet2">If this is clicked, is leads to element2</div>
<div class="bullet3">If this is clicked, is leads to element3</div>

我觉得我可以用 .addClass.removeClass 做一些事情,但我脑子里不太明白循环的语义。

.active 手动应用于 .bullet2

enter image description here

编辑完整的 HTML

<div class="twwetHolder">
    <div class="tweet">
     <ul>
        <li>
            <div>element 1</div>
        </li>
        <li>
            <div>element 2</div>
        </li>
        <li>
            <div>element 3</div>
        </li>
     </ul>

    </div>  
<div class="bullet1"></div>
<div class="bullet2"></div>
<div class="bullet3"></div>
</div>

最佳答案

更新:

我建议您为每个元素符号(另一个)添加一个类,然后使用 btnGo 事件和一个点击事件来添加该类。

http://jsfiddle.net/lucuma/fg6d4/1/

<div class="bullet1 btngo">a</div>
<div class="bullet2 btngo">b</div>
<div class="bullet3 btngo">c</div>

$('.tweet').jCarouselLite({btnGo:$('.btngo')});

    $('.btngo').click(function() {
       $('.btngo').removeClass('active'); 
       $(this).addClass('active');

    });
​

原文:

您可以尝试这些选项:

 beforeStart: function(a) {
      $(a).removeClass('active');
    },
   afterEnd: function(a) {
        $(a).addClass('active');
    }

关于jquery - 如何在 3 个元素上循环上课,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10800897/

相关文章:

带有文字覆盖在图像上的 css 圆圈

jQuery根据类获取所选下拉项的值

jquery:根据类名变量隐藏/显示

javascript - toggleClass() 在点击标签时未按预期工作

html - HTML5视频是否可以将嵌入在mp4文件中的字幕作为轨道播放?

javascript - 如何用鼠标拖放?

html - Chrome 无法正确加载谷歌字体

jquery - 使 div 背景图像重复其中的源文件

javascript - 循环输入字段;两次迭代后停止

javascript - 如何始终在 Lightbox 2 上显示导航按钮?