부트스트랩 프레임워크는 자동 캐러셀 이미지용 코드를 구현합니다.-JS 튜토리얼-php.cn

부트스트랩 프레임워크는 자동 캐러셀 이미지용 코드를 구현합니다.

yulia

풀어 주다： 2018-10-19 11:49:28

원래의

7357명이 탐색했습니다.

웹사이트를 탐색할 때 거의 모든 웹사이트의 홈페이지에 캐러셀 이미지가 있다는 것을 아셨나요? 프런트엔드 개발자로서 부트스트랩 프레임워크를 사용하여 이미지 캐러셀을 작성하시겠습니까? 이 기사에서는 부트스트랩 프레임워크의 자동 캐러셀에 대한 코드를 공유합니다. 관심 있는 친구는 한 번 살펴볼 수 있습니다.

부트스트랩 프레임워크 레이아웃을 사용하기 전에 먼저 관련 jQuery, CSS 및 JS 파일을 소개해야 합니다. 확실하지 않은 경우 이전 기사인 HTML 페이지에서 부트스트랩 프레임워크를 사용하는 방법을 읽어보거나 다음을 참조하세요. 부트스트랩 튜토리얼 . 자동 캐러셀을 구현하는

bootstrap 코드는 다음과 같습니다:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>  
  <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <div id="myCarousel" class="carousel slide" style="width: 500px;" data-ride = "carousel" data-interval="1000">
   <!-- 轮播（Carousel）指标 -->
   <ol class="carousel-indicators">
    <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>   
   <!-- 轮播（Carousel）项目 -->
   <div class="carousel-inner" >
    <div class="item active">
     <img src="img/aaa1.jpg" alt="First slide">
    </div>
    <div class="item">
     <img src="img/aaa2.jpg" alt="Second slide">
    </div>
    <div class="item">
     <img src="img/aaa3.jpg" alt="Third slide">
    </div>
   </div>
   <!-- 轮播（Carousel）导航 -->
   <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    
   </a>
   <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    
   </a>
  </div> 
 </body>
</html>

로그인 후 복사

태그 기능: 사진의 왼쪽을 마우스로 클릭하면 이전 사진을 볼 수 있고, 사진의 오른쪽을 클릭하면 다음 사진을 볼 수 있습니다.

이미지의 자동 캐러셀 효과를 얻으려면 가장 바깥쪽 div에 data-ride = "carousel" data-interval="1000"을 추가하세요. 데이터 간격은 캐러셀의 속도를 1000밀리초로 설정할 수 있습니다. 1000밀리초.

이미지 전환 속도 등 필요에 따라 캐러셀 스타일을 수정할 수 있습니다.

효과는 그림과 같습니다.

부트스트랩 프레임워크는 자동 캐러셀 이미지용 코드를 구현합니다.

위에서는 이미지 캐러셀을 구현하는 부트스트랩 프레임워크의 코드를 공유했습니다. 비교적 간단합니다. 부트스트랩 프레임워크 공식을 방문하면 됩니다. 웹사이트: http://v3.bootcss.com, 이 기사가 도움이 되기를 바랍니다! 더 많은 관련 튜토리얼을 보려면 Bootstrap 온라인 설명서

위 내용은 부트스트랩 프레임워크는 자동 캐러셀 이미지용 코드를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!