2013-11-29 6 views
0

나는 회전판 부트 스트랩 2.3.2를 사용하여 웹 사이트를 만들고 있습니다. 회전 목마를 가지고 있습니다. 회전 목마가 슬라이딩되지 않습니다. 회전식 슬라이드에 자바 스크립트를 추가했는데, 무엇이 빠져 있는지 모릅니다.회전 목마 부트 스트랩에서 회전판이 작동하지 않습니다. 2.3.2

내가 뭘 잘못하고 있는지 말해 주시겠습니까?

<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> 

감사 : 여기

내가 뭐하는 거지 코드입니다.

+0

유를 쓸 수 있습니다 $로 (문서) .ready (함수() {} 단지 –

+0

그것을 시도 내 코드를 업데이트했습니다. 알겠습니다 .. – user2890202

+0

당신이 내가 가진 –

답변

0

이 지금 여기

이 유는

<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의 폐쇄 후 backgroung에 이미지를 작성해야 다음 코드를 작성해야합니다.

여기
<script type="text/javascript"> 
     $('.carousel').carousel({ 
      interval: 5000 
     }); 
    </script> 
관련 문제