无法弄清楚为什么carousel随机化代码会随机使carousel在加载时消失

Can't figure out why carousel randomizer code randomly makes the carousel disappear on load

本文关键字：carousel 加载 消失 随机 代码 弄清楚 为什么 随机化      更新时间：2023-09-26

我有代码，我用它来使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>

是否有什么明显的东西会导致它不工作?

谢谢!

这听起来像是脚本有时在jQuery准备好之前运行并抛出错误。

你应该把所有的代码放入jQuery的ready函数 
$(document).ready(function(){
    //Your code here
});

或者更好的是，将代码放入它自己的函数中，以便从ready处理程序

调用
<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>
相关文章：