Question

我的网站上有一个Bootstrap Carousel，有三个这样的元素：

            <a><img data-src="img" alt="Third slide" src="img">
        </a>
         <div class="carousel-caption">             
        <h2>  
  <ul id="columncarro4" type="circle" style="">
          <li>text1</li><br>
          <li>text</li><br>
          <li>text</li>

          </ul>

         </h2>
        </div>
      </div>

还有一些Javascript以我想要的方式移动文本的位置：

      $(document).ready(function(){

                $('#columncarro4').animate({
                           'margin-left':'-3%'
                },500).animate({

                           'margin-left':'-255px'
                },'slow');
      });

我想在第二张幻灯片幻灯片出现时开始播放第二张幻灯片的动画。

我有三个动画，但它们从网页开始以来就开始了，并且不会出现幻灯片。

Answer 1

 $(document).ready(function(){

                $('#columncarro4').animate({...

该代码将在文档就绪上启动animate函数 - 页面已满载。你必须用另一个事件包装它 - 你什么时候才能完全开始，事情发生后？例如，如果您希望在点击Carousel后启动动画，则应执行以下操作：

$(document).ready(function(){
       $('#columncarro4').click(function(){
            $('#columncarro4').animate({
                       'margin-left':'-3%'
            },500).animate({

                       'margin-left':'-255px'
            },'slow');
        });
  });

Answer 2

使用SetInterval（）

编辑：

尝试这样的事情：

$(document).ready(function(){
    var interval;
    function animate() {
        $('#columncarro4').animate({'margin-left':'-3%'}, 500)
        .animate({'margin-left':'-255px'}, 'slow');
    }
    function start() {
        interval = setInterval(animate, 5000);
    }
    $('#columncarro4').click( function() {
        clearInterval(interval);
        animate();
        start();
    });
    start();
});

或者，如果您在carusel更改时触发了事件，则可以绑定到该事件。

如何为Bootstrap轮播上显示的文本设置动画？

2 个答案:

编辑：