Question

我有一个像这样的小提琴http://jsfiddle.net/roxds51h/2/ - 有嵌入式轮播的macbook pro包含两张图片。用户可以通过单击屏幕上的白点来切换图片。我想删除这些点，并通过单击下面的文本来更改图片：

<div class="row">
    <div class="col-sm-6">
            here is one text //after clicking that 
                             //the first picture should
                             //appear on macbook

    </div>
    <div class="col-sm-6">
            here is second text //after clicking that 
                                //the second picture should
                                //appear on macbook
    </div>
</div>

我该怎么做？此外，现在每隔几秒钟图片会自动更改 - 我该如何禁用它？谢谢！

Answer 1

您可以使用以下代码轻松实现：

<div class="row">
  <div class="col-sm-6" data-target="#17" data-slide-to="0">
    here is one text
  </div>
  <div class="col-sm-6" data-target="#17" data-slide-to="1">
    here is second text
  </div>
</div>

禁用自动播放更改data-interval="5000"至data-interval="false"。

<div id="17" class="carousel slide" data-interval="false" data-ride="carousel">

去除白点：

从HTML中删除它们，我的意思是这段代码：

<ol class="carousel-indicators">
  <li data-target="#17" data-slide-to="0" class=""></li>
  <li data-target="#17" data-slide-to="1" class="active"></li>
</ol>

Answer 2

您需要交换数据目标并在var app = angular.module("app", []); app.controller('mainCtrl', function ($scope,$element) { var texts = ["example1", "example2", "example3"]; var textToAdd = angular.element("#sizin"); var count = 0; function changeText (){ textToAdd.text(texts[count]); count < 3 ? count++ : count = 0; } setInterval(changeText,500); });标记中扭曲文字。

HTML：

<a></a>

CodePen Demo

如何通过单击网页上的超链接来切换引导程序轮播中的项目？

2 个答案: