boottstrap 윤 방도 예시 코드 공유

본 논문 의 사례 는 여러분 에 게 boottstrap 순환 방송 그림 의 구체 적 인 코드 를 공유 하 였 으 며,여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.


<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
 <meta charset="utf-8"> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 <title>XXX</title> 
 <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"> 
 <link rel="stylesheet" href="css/main.css"> 
 <!--[if lt IE 9]> 
 <script src="lib/html5shiv/html5shiv.min.js"></script> 
 <script src="lib/respond/respond.min.js"></script> 
 <![endif]--> 
</head> 
<body> 
<!--    
 1、       ：id="myCarousel" class="carousel slide" 
 2、    3       div   ：class="carousel-inner"        div   class="item" 
           active 
 3、 ol  class="carousel-indicators"     li     data-target="#myCarousel" 
   data-slide-to=0,1,2          active 
 4、          ，    div   style="width: 900px;" （900     ） 
 5、             ：href="#myCarousel" class="left carousel-control" data-slide="prev" 
        href="#myCarousel" class="right carousel-control" data-slide="next" 
 --> 
<div id="myCarousel" class="carousel slide" style="width: 900px;">      
<!--data-ride="carousel"--> 
<!--<div id="myCarousel" class="carousel slide" style="width: 900px;" data-ride="carousel">-->
<!--    ，  5 --> 
 <ol class="carousel-indicators"><!--     3  --> 
  <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
  <li data-target="#myCarousel" data-slide-to="1"></li> 
  <li data-target="#myCarousel" data-slide-to="2"></li> 
 </ol> 
 <div class="carousel-inner"><!--   3   --> 
  <div class="item active"> 
   <img src="img/slide1.png" alt=" 1   "> 
   <div class="carousel-caption"> <!--          --> 
    <h3>  </h3> 
    <p>    </p> 
   </div> 
  </div> 
  <div class="item"> 
   <img src="img/slide2.png" alt=" 2   "> 
  </div> 
  <div class="item"> 
   <img src="img/slide3.png" alt=" 3   "> 
  </div> 
 </div> 
 <!--         --> 
 <a href="#myCarousel" class="left carousel-control" data-slide="prev"> 
  <span class="glyphicon glyphicon-chevron-left"></span> 
 </a> 
 <a href="#myCarousel" class="right carousel-control" data-slide="next"> 
  <span class="glyphicon glyphicon-chevron-right"></span> 
 </a> 
</div> 
<script src="lib/jquery/jquery.js"></script> 
<script src="lib/bootstrap/js/bootstrap.js"></script> 
<script src="js/main.js"></script> 
<script> 
// $('#myCarousel').carousel();/*    ，  5 */ 
 
 
 
 $('#myCarousel').carousel({ 
  interval:3000 , /*         */ 
  pause:'hover',/*      ，              ，    ，       */ 
  /*wrap:false*/ /*    ，  true，      */ 
 }); 
 
 
 
 /*     
 * cycle     (      ) 
  pause      
  number          (    0   ，    ) 
  prev            
  next            
 * 
 * 
 * //       
  $('button').on('click', function () { 
  //   ，     
  $('#myCarousel').carousel('cycle'); 
  //     
  } 
 * */ 
 
 
//   
$('#myCarousel').on('slide.bs.carousel', function () { 
 alert('    slide          '); 
}); 
$('#myCarousel').on('slid.bs.carousel', function () { 
 alert('            '); 
}); 
</script> 
</body> 
 
</html>

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

부트스트랩 5 스티커

Sticky는 페이지의 특정 영역에서 요소를 잠글 수 있도록 하는 구성 요소입니다. 수동 설치(zip 패키지) 부트스트랩 이미지 구성 요소를 활용하고 프로젝트에서 사용하려면 먼저 을 설치해야 합니다. MDB CLI ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

boottstrap 윤 방도 예시 코드 공유

좋은 웹페이지 즐겨찾기