jquery - 如何创建一个自动旋转并在鼠标悬停时停止的元素容器

Question

       <div class="part-1 content">
            <div class="container">
                <div class="row">
                    <div class="col-sm-2">
                        <img src="images/sc/part-1-alt.png" class="img-responsive" alt="a" data-toggle="tooltip" title="Donec id elit non mi porta loreta et">
                    </div>

                    <div class="col-sm-2">
                        <img src="images/sc/part-2.png" class="img-responsive" alt="a" data-toggle="tooltip" title="Donec id elit non mi porta loreta et">
                    </div>

                    <div class="col-sm-2">
                        <img src="images/sc/part-3.png" class="img-responsive" alt="a" data-toggle="tooltip" title="Donec id elit non mi porta loreta et">
                    </div>

                    <div class="col-sm-2">
                        <img src="images/sc/part-4.png" class="img-responsive" alt="a" data-toggle="tooltip" title="Donec id elit non mi porta loreta et">
                    </div>

                    <div class="col-sm-2">
                        <img src="images/sc/part-5.png" class="img-responsive" alt="a" data-toggle="tooltip" title="Donec id elit non mi porta loreta et">
                    </div>

                    <div class="col-sm-2">
                        <img src="images/sc/part-6-alt.png" class="img-responsive" alt="a" data-toggle="tooltip" title="Donec id elit non mi porta loreta et">
                    </div>
                </div>
            </div>
        </div>

这是我想要表现的元素。我想要的是让它看起来像您在新闻中看到的乐队，当我将鼠标悬停在它上面时，它会移动并停止。我正在使用 bootstrap 3，如果它可以在它的轮播中完成，那就太好了。在问这个之前我做了一些搜索，但我真的找不到任何相关的东西，所以如果这实际上是另一个措辞不同的问题的副本，请原谅

Answer 1

哦，它叫做无限循环轮播，并且有一个选项可以指定您想要触发暂停的事件:http://getbootstrap.com/2.3.2/javascript.html#carousel .

$('.carousel').carousel({
  interval: 2000,
  pause: 'hover' 
 /*Pauses the cycling of the carousel on mouseenter 
 and resumes the cycling of the carousel on mouseleave. */
})