轮播中我有6个项目。我想在其下方有一个进度条,该进度条与轮播的活动项一起转换。

我这样尝试过:
http://www.bootply.com/ZSAOQu7mph

我想我混用了CSS语法,但是根本不知道是什么。
我尝试了两种不同的方法,但似乎都错了。

最佳答案

编辑:经过一点谷歌研究,这是我发现的:


  CSS SOURCE 1中没有父选择器| SOURCE 2


通过查看您在bootply中添加的CSS,在我看来这就是您要尝试的。像,如果'#sol1'具有'.active'类,则更新'.progress'宽度,依此类推。这不能在CSS中完成,因为'.progress'在'.nav-pills'之外。您需要使用Jquery来实现。

我从您给我的LINK从头开始。这是我所做的:

我像您一样在html中添加了表示进度条的DIV。由于第一步在开始时处于活动状态,因此该条的宽度开始为16.66%。在这种情况下,最好使用百分比,因为即使页面已调整大小,它也可以很好地适应引导程序。

滑块包含六个幻灯片,即六个步骤。我们的进度栏每次必须增加16.6%。当达到100%时,滑块将重置为步骤1,进度条将返回16.66%,依此类推。

我添加了一些Css3标记,以简化进度条动画的变化。

至于javascript / jquery代码,我创建了一个简单的函数,每次该函数都会被调用:


滑块自动移动(默认循环)
按下导航按钮(步骤)


该函数仅采用一个参数,即索引。为了更新进度条,我们需要在索引上加1,然后将结果乘以16.66。除非索引为0,否则百分比始终为16.66。

我可以进一步优化它,但是时间不在我的身边。这是BOOTPLY EXAMPLE

HTML:

<div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">

        <!-- Wrapper for slides -->
        <div class="carousel-inner">

            <div class="item active">
              <img src="http://placehold.it/1200x400/cccccc/ffffff">
               <div class="carousel-caption">
                <h3>Headline</h3>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
              </div>
            </div><!-- End Item -->

             <div class="item">
              <img src="http://placehold.it/1200x400/999999/cccccc">
               <div class="carousel-caption">
                <h3>Headline</h3>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
              </div>
            </div><!-- End Item -->

            <div class="item">
              <img src="http://placehold.it/1200x400/dddddd/333333">
               <div class="carousel-caption">
                <h3>Headline</h3>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
              </div>
            </div><!-- End Item -->

            <div class="item">
              <img src="http://placehold.it/1200x400/999999/cccccc">
               <div class="carousel-caption">
                <h3>Headline</h3>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
              </div>
            </div><!-- End Item -->

            <div class="item">
              <img src="http://placehold.it/1200x400/999999/cccccc">
               <div class="carousel-caption">
                <h3>Headline</h3>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
              </div>
            </div><!-- End Item -->

            <div class="item">
              <img src="http://placehold.it/1200x400/999999/cccccc">
               <div class="carousel-caption">
                <h3>Headline</h3>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
              </div>
            </div><!-- End Item -->

        </div><!-- End Carousel Inner -->


        <ul class="nav nav-pills nav-justified">
          <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a></li>
          <li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a></li>
          <li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li>
          <li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a></li>
          <li data-target="#myCarousel" data-slide-to="4"><a href="#">Services<small>Lorem ipsum dolor sit</small></a></li>
          <li data-target="#myCarousel" data-slide-to="5"><a href="#">Services<small>Lorem ipsum dolor sit</small></a></li>
        </ul>

    </div><!-- End Carousel -->
    <div class="my-progress-container">
        <div class="my-progress-bar">

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


CSS:

body { padding-top: 20px; }
#myCarousel .nav a small {
    display:block;
}
#myCarousel .nav {
    background:#eee;
}
#myCarousel .nav a {
    border-radius:0px;
}

.my-progress-container{
    margin-top: 5px;
    background: #ebebeb;
}

.my-progress-bar{
    width:0%;
    background:#F59843;
    height: 25px;
    -webkit-transition: width 1s ease-in-out;
      -moz-transition: width 1s ease-in-out;
      -o-transition: width 1s ease-in-out;
      transition: width 1s ease-in-out;
}


jQuery代码:

$(function () {

    //Global variables
    $globalVars = {
        nextIndex:0,
        currentPercent:16.66
    }

    //Initialize progress bar since we start on the first step
    $('.my-progress-bar').css({
        width: '16.66%'
    });

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

    var clickEvent = false;
    $('#myCarousel').on('click', '.nav a', function() {
            clickEvent = true;
            $('.nav li').removeClass('active');
            $(this).parent().addClass('active');
            var current = $('.nav li.active');
            var id = parseInt(current.data('slide-to'));
            //Call progress bar update function
            updateProgress(id);
    }).on('slid.bs.carousel', function(e) {
        if(!clickEvent) {
            var count = $('.nav').children().length -1;
            var current = $('.nav li.active');
            current.removeClass('active').next().addClass('active');
            var id = parseInt(current.data('slide-to'));
            //Set the next slide index
            $globalVars.nextIndex = id + 1;

            //If the next index goes out of bound, reset to 0
            if($globalVars.nextIndex == 6){
                $globalVars.nextIndex = 0;
            }

            //Call progress bar update function
            updateProgress($globalVars.nextIndex);

            if(count == id) {
                $('.nav li').first().addClass('active');
            }
        }
        clickEvent = false;
    });
});

function updateProgress(nextIndex){
        //Check to see if we came back to the first step
        if(nextIndex == 0){
            //If true, we set our progress to 16.66%
            $globalVars.currentPercent = 16.66;
        }
        else{
            //Else we update the progress bar
            $globalVars.currentPercent = 16.66 * (nextIndex + 1);
        }

        //Update progress bar width property
        $('.my-progress-bar').css({
            width: $globalVars.currentPercent + '%'
        });
}

10-05 20:42
查看更多