Question

我有一些代码，我用它来使BS轮播在页面加载时随机化幻灯片，这样它就可以随机选择一个并首先显示它。起初它工作得很好但现在当我重新加载页面或尝试第一次点击它时根本不显示任何内容。

这是我正在使用的JQuery，我试图调试它，但我不太了解JQuery

<!--code below is for carousel randomizer-->

<script>
    var $item = $('.carousel .item');
    $item.addClass('full-screen');

    var $numberofSlides = $('.item').length;
    var $currentSlide = Math.floor((Math.random() * $numberofSlides));

   $('.carousel-indicators li').each(function(){
   var $slideValue = $(this).attr('data-slide-to');
   if($currentSlide == $slideValue) {
    $(this).addClass('active');
    $item.eq($slideValue).addClass('active');
  } else {
    $(this).removeClass('active');
    $item.eq($slideValue).removeClass('active');
  }
});

$('.carousel').carousel({
  interval: 6000,
  pause: "false"
});
</script>

这是与之配合的HTML

<div id="mycarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#mycarousel" data-slide-to="0"></li>
    <li data-target="#mycarousel" data-slide-to="1"></li>
    <li data-target="#mycarousel" data-slide-to="2"></li>
    <li data-target="#mycarousel" data-slide-to="3"></li>
  </ol>

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

    <div class="item active">
        <img src="/images/banner1.jpg" alt="First Image">
    </div>
    <div class="item">
        <img src="/images/banner2.jpg" alt="Second Image">
    </div>
    <div class="item">
        <img src="/images/banner3.jpg" alt="Third Image">
    </div>
    <div class="item">
        <img src="/images/banner4.jpg" alt="Fourth Image">
    </div>
    <div class="item">
        <img src="/images/banner5.jpg" alt="Fifth Image">
    </div>
    <div class="item">
        <img src="/images/banner6.jpg" alt="Sixth Image">
    </div>
  </div>

  <!-- Controls -->
  <!--<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>-->
</div>

是否有任何明显的因素导致它无法正常工作？

谢谢！

Answer 1

这听起来有时在jQuery准备好之前脚本会运行并反而引发错误。

您应该将所有代码放入jQuery的准备好的功能

$(document).ready(function(){
    //Your code here
});

或者更好的是，您的代码将自己的函数从就绪处理程序中调用

<script>
    function InitCarousel(){
        var $item = $('.carousel .item');
        $item.addClass('full-screen');

        var $numberofSlides = $('.item').length;
        var $currentSlide = Math.floor((Math.random() * $numberofSlides));

        $('.carousel-indicators li').each(function(){
            var $slideValue = $(this).attr('data-slide-to');
            if($currentSlide == $slideValue) {
                $(this).addClass('active');
                $item.eq($slideValue).addClass('active');
            } else {
                $(this).removeClass('active');
                $item.eq($slideValue).removeClass('active');
            }
        });

        $('.carousel').carousel({
            interval: 6000,
            pause: "false"
        });
    }

    $(document).ready( InitCarousel );
</script>

无法弄清楚为什么轮播随机发生器代码随机使轮播在负载上消失

1 个答案: