Question

我的自举旋转木马上有几个div，某种导航按钮。

我需要的是在鼠标悬停时更改幻灯片。

喜欢这个网站：magnatek.nichost.ru和vnka.ru

如何做到这一点？

提前谢谢。

Answer 1

HTML

<div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1" class=""></li>
        <li data-target="#myCarousel" data-slide-to="2" class=""></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="http://getbootstrap.com/2.3.2/assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
            <div class="carousel-caption">
                 <h4>First Thumbnail label</h4>

                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            </div>
        </div>
        <div class="item">
            <img src="http://getbootstrap.com/2.3.2/assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
            <div class="carousel-caption">
                 <h4>Second Thumbnail label</h4>

                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            </div>
        </div>
        <div class="item">
            <img src="http://getbootstrap.com/2.3.2/assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
            <div class="carousel-caption">
                 <h4>Third Thumbnail label</h4>

                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            </div>
        </div>
    </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>

</div>

脚本

$('#myCarousel').carousel({
    interval: false
});

var i;

$('.carousel-control').on("mouseover", function () {
    var control = $(this),
        interval = 500;

    i = setInterval(function () {
        control.trigger("click");
    }, interval);
})
.on("mouseout", function () {
    clearInterval(i);
});

Answer 2

你需要改变jquery

Error Code: 1833. Cannot change column 'id': used in a foreign key constraint 'fk_Member_Address1' of table 'mydb.member'

同时替换HTML

$('.carousel-control').on("mouseover", function () {
replace with following code
$('.carousel-inner').on("mouseover", function () {

在Bootstrap Carousel中鼠标悬停时更改幻灯片

2 个答案: