Question

我试图像这样制作一个转盘

旋转木马上有每个幻灯片内容的按钮，当你将鼠标移到旋转木马的任何按钮上时，这会改变幻灯片，还有一个计时器来更改幻灯片。

我正在使用bootstrap 3.2.0这就是我所拥有的

HTML

    <div class="panel-body clearfix">
    <!-- LINKED NAV -->
    <div class="col-xs-12">
        <ol class="carousel-linked-nav pagination">
            <li class=""><a href="#1">4</a></li>
            <li class=""><a href="#2">3</a></li>
            <li class=""><a href="#3">2</a></li>
            <li class=""><a href="#4">1</a></li>
        </ol>
    </div>
    <div id="myCarousel" class="carousel slide">
        <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="item">
                <a href="#">
                    <img alt="" class=" img-responsive " src="<?= IMG . '4.jpg' ?>">
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img alt="" class=" img-responsive " src="<?= IMG . '3.jpg' ?>">
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img alt="" class=" img-responsive " src="<?= IMG . '2.jpg' ?>">
                </a>
            </div>
            <div class="item active">
                <a href="#">
                    <img alt="" class=" img-responsive " src="<?= IMG . '1.jpg' ?>">
                </a>
            </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
    </div>
</div>

CSS

.carousel-indicators li{
   border: none;
   background-color: #888;
}
.carousel-indicators li.active{
   border: none;
   background-color: #4297d7;
}
#myCarousel {
   margin-top: 10px;
}
.carousel-linked-nav, .item img {
   display: inline; 
   margin: 0 auto;
}
.carousel-linked-nav {
   width: 120px;
   margin-bottom: 20px; 
}

JS

function carousel() {
    $('#myCarousel').carousel({
        interval: 3000
    });
    $('.carousel-linked-nav > li > a').click(function() {
        var item = Number($(this).attr('href').substring(1));
        $('#myCarousel').carousel(item - 1);
        $('.carousel-linked-nav .active').removeClass('active');
        $(this).parent().addClass('active');
        return false;
    });
    $('#myCarousel').bind('slid', function() {
        $('.carousel-linked-nav .active').removeClass('active');
        var idx = $('#myCarousel .item.active').index();
        $('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');
    });
}

我试图像链接那样制作旋转木马，而且我不能，旋转木马按钮使用此中的所有空间，当鼠标悬停在按钮上时更改幻灯片

由于

Answer 1

好吧，我决定在js

中添加它

$('.carousel-linked-nav > li > a').mouseover(function() {
        var item = Number($(this).attr('href').substring(1));
        $('#myCarousel').carousel(item - 1);
        $('.carousel-linked-nav .active').removeClass('active');
        $(this).parent().addClass('active');
        return false;
    });

所以我没有的基本问题是我不能让按钮使用旋转木马的所有空间。我的意思是旋转木马和空间的宽度分布在它们之间。

如何在鼠标悬停时制作带按钮的旋转木马并更换幻灯片

1 个答案: