javascript - 幻灯片图像切换时未出现动画 - Thinbug

幻灯片图像切换时未出现动画

时间：2012-12-22 21:15:31

标签： javascript html twitter-bootstrap carousel

我有Bootstrap轮播工作，但没有“幻灯片”动画。它只是取代了图像。我查看了Twitter Bootstrap Carousel Not Sliding 和Twitter Bootstrap Carousel Slide Doesn't Work 但那里的处方似乎对我不起作用。

我的bootstrap.js文件肯定包含“transition”位。因为旋转木马有效，我显然正在那里找到合适的班级。我很难理解幻灯片动画无效的原因。

HTML

<head>
    <title>LessonUp - Learn Piano Faster</title>
    <!--Put in CSS link-->
    <script src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <link  type="text/css" href="stylesheets/bootstrap.css" rel="stylesheet" media="screen"/>
    <script src="js/bootstrap.js"></script>
    <!--<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"</script>-->
    <script>
    $(document).ready(function(){
        $('.carousel').carousel({
            interval:3000
        });
    });
    </script>
    <script>
        $(document).ready(function(){
            $("#email_submit").click(function(event){
                $(".alert-success").show();
                $(".alert-success").fadeOut(8000);
          });
      });
    </script>

轮播部分

<!--Carousel-->
           <div class="span7 slide">
               <div id="myCarousel" class="carousel slide">
       <!--Carousel Items-->
                   <div class="carousel-inner">
                        <div class="active item"><img src="img/Library_shot.png"></div>
                            <div class="item"><img src="img/performance_shot.png"></div>
                            <div class="item"><img src="img/lesson_shot.png"></div>
                   </div>
        <!--Carousel Nav-->
                   <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                   <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
                </div>
           </div>

您可以在www.lessonupapp.com上看到输出

1 个答案:

答案 0 :(得分：0)

我认为这是因为你的图像太大了......我不是在这里开玩笑！使它变小，它会工作。你的图像大于5000px x 4000px大且超过1mb ......