Question

我正在使用twitter bootstrap 2.3.2创建网站，其中我有旋转木马。但是旋转木马没有滑动，我为旋转木马添加了java脚本，但我不知道缺少什么。

请告诉我，我做错了什么？

以下是我正在做的代码：

<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>
      ExampleWebsite1
    </title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">





    <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
    <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">



    <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js">
    </script>

    <script type="text/javascript">  
    $(document).ready(function () {  
        $('.dropdown-toggle').dropdown();  
    });  


                    <style>

                      .carousel .item {
    width: 100%; /*slider width*/
    max-height: 900px; /*slider height*/
}
.carousel .item img {
    width: 100%; /*img width*/
}
/*add some makeup*/
.carousel .carousel-control {
    background: none;
    border: none;

}
/*full width container*/
@media (max-width: 767px) {
    .block {
        margin-left: -20px;
        margin-right: -20px;
    }
}

                    <style>
                        body{
                        background-color: #232323;
                        }
                        </style>



                        <style type="text/css"> 
                        h1 { 

                        text-decoration: underline; color: #c00;


                        } 
                        h1 span{ color: #00A2E8
                        }
                        h1{font-weight: bold;}

                        h1{font-size: 30px;}

                        </style> 

                        <style>
                        .navbar-inner{
                        height: 80px;
                        }
                        </style>




    </head>

                      <body>


                      <nav class="navbar navbar-inverse navbar-fixed-top">
                      <div class="navbar-inner">
                      <div class="container">
                       <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </a>                     
                      <a class="brand" href="#"><img class="img-responsive" src="D:\Image\nyuralsimage.png"></a>          


                      <div class="nav-collapse collapse">
                      <ul class="nav pull-right" id="top-nav">                    

                      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#section1">STUDIO<b class="caret"></b></a>
                      <ul class="dropdown-menu">
                      <li><a href="#">Team</a></li>
                      <li><a href="#">Clients</a></li>
                      </ul>
                      </li>
                      <li><a href="#section2">SERVICES</a></li>
                      <li><a href="#section3">CONTACT</a></li>
                      <li><a href="#section4">SOCIAL CONNECT</a></li>



                    </ul>

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




                    <section class="block">
                    <div id="myCarousel" class="carousel slide">
                        <div class="carousel-inner">
                            <div class="item active">
                                <img src="D:/Image/slide1copy.jpg" alt="Slide1" />
                            </div>
                            <div class="item">
                                <img src="http://lorempixel.com/1024/750" alt="Slide2" />
                            </div>
                            <div class="item">
                                <img src="D:/Image/slide3copy.jpg" alt="Slide3" />
                            </div>
                        </div>

                        <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
                        <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
                    </div>
                    </section>

  <script src="js/jquery-1.8.3.min.js"></script>                                         
                     <script src="js/bootstrap.min.js"></script>

                      <script src="js/plugins.js">
                    </script>
                      <script src="js/main.js">
                    </script>


                      <script>
                      $('#top-nav').onePageNav({
                        currentClass: 'active',
                          changeHash: true,
                          scrollSpeed: 1200
                      }
                      );
                      </script>

       </body>
       </html>

感谢。

Answer 1

立即尝试

这里你只能写

 <img ....>

但你需要在风格中写下背景图像

        <div class="item active">
            <div style="background-image: url('img/slideImg/1.png');"
                class="fill"></div>
            <div class="carousel-caption">
                <h1>Ready to Style &amp; Add Content</h1>
            </div>
        </div>
    </div>

并且在caruosel div关闭之后，你必须并且应该写下面的代码

<script type="text/javascript">
        $('.carousel').carousel({
            interval: 5000
        });
    </script>

Carousel无法在twitter bootstrap 2.3.2中运行

1 个答案: