부트스트랩 프레임워크는 자동 캐러셀 이미지용 코드를 구현합니다.
- yulia원래의
- 2018-10-19 11:49:287247검색
웹사이트를 탐색할 때 거의 모든 웹사이트의 홈페이지에 캐러셀 이미지가 있다는 것을 아셨나요? 프런트엔드 개발자로서 부트스트랩 프레임워크를 사용하여 이미지 캐러셀을 작성하시겠습니까? 이 기사에서는 부트스트랩 프레임워크의 자동 캐러셀에 대한 코드를 공유합니다. 관심 있는 친구는 한 번 살펴볼 수 있습니다.
부트스트랩 프레임워크 레이아웃을 사용하기 전에 먼저 관련 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!