나는 세 개의 부트 스트랩 사진 회전 목마 효과를 공유했으며, 항상 만족하는 하나가 있다고 생각합니다!
첫 번째 효과 : 부트 스트랩 간단한 회전 목마
<! docType html> <html> <head> <title> bootstrap 인스턴스- 간단한 회전식 카로 셀 플러그인 </title> <link href = "/bootstrap/3.0.3/css/bootstrap.min.css"rel = "Stylesheet"> <script src = "/jquery/2.0.0/jquery. <script src = "/bootstrap/3.0.3/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <!-Carousel metrics-> <ol> <li data-target = "#mycarousel"data-slide-to = "0"> <li data-target =#mycarousel " data-slide-to = "1"> </li> <li data-target = "#mycarousel"data-slide-to = "2"> </li> </ol> <!-회전식 프로젝트-> <div> <img src = "/wp-content/uploads/2014/07/slide1.png"> <div> <img src = "/wp-content/uploads/2014/07/slide2.png"> </div> <div> <img src = "/wp-content/uploads/2014/07/slide3.png"> </div> </div> </div> </div> </div> <a href = <#mycarousel "#mycarousel"#mycarousel. href = "#mycarousel"data-slide = "next">› </a> </div> </body> </html>
두 번째 유형 : 제목이있는 회전식 (매뉴얼)
<! docType html> <html> <head> <title> bootstrap 인스턴스 - 회전식 플러그인 제목 </title> <link href = "/bootstrap/3.0.3/css/bootstrap.min.css"rel = "stylesheet"> <script src = "/jquery/2.0.0/jquery. <script src = "/bootstrap/3.0.3/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <!-Carousel metrics-> <ol> <li data-target = "#mycarousel"data-slide-to = "0"> <li data-target =#mycarousel " Data-Slide-to = "1"> </li> <li data-target = "#mycarousel"data-slide-to = "2"> </li> <! </ol> <!-회전식 프로젝트-> <div> <img src = "/wp-content/uploads/2014/07/slide1.png"</div> <imd> <im src = "/wp-content/uploads/2014/07/slide2.png"> <div> title 2 </div> </div> <div> <img src = "/wp-content/uploads/uploads/uploads/2014/div3.png"> <div> 3 </div> </div> <!-carousel avigation-> <a href = " data-slide = "prev"> ‹</a> <a href = "#mycarousel"data-slide = "next">› </a> </div> </body> </html>
세 번째 유형 : JS는 자동 회전 목마를 제어합니다
<! docType html> <html> <head> <title> bootstrapjs 컨트롤 캐 러셀 </title> <link href = "/bootstrap/3.0.3/css/bootstrap.min.css"Rel = "stylesheet"> <script src = "/jquery/2.0.0/jquery.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min. src = "/bootstrap/3.0.3/js/bootstrap.min.js"> </script> <body> <div id = "myCarousel"> <!-회전식 표시기-> <ol> <li data-target = "#myCarousel"data-slide-to = "0"> data-slide-to = "1"> </li> <li data-target = "#mycarousel"data-slide-to = "2"> </li> </ol> <!-회전식 프로젝트-> <div> <img src = "/wp-content/uploads/2014/07/slide1.png"> <div> <img src = "/wp-content/uploads/2014/07/slide2.png"> </div> <div> <img src = "/wp-content/uploads/2014/07/slide3.png"> </div> </div> </div> </div> </div> <a href = <#mycarousel "#mycarousel"#mycarousel. href="#myCarousel" data-slide="next">›</a> <!-- Control Button--> <div style="text-align:center;"> <input type="button" value="Start"> <input type="button" value="Pause"> <input type="button" value="Previous Slide"> <input type="button" value="Next Slide"> <input type="button" value="Slide 1 "> <input type ="button "value ="slide 2 "> <input type ="button "value ="slide 3 "> </div> </div> <cript> $ (function () {// carousel $ (". start-slide ")). click () {$ ("#mycarousel "). carousel ( 'cycle');}; Carousel $ ( ". Pause-Slide"). click () {$ ( "#mycarousel"). carousel ( 'pause');}); $ ( ". Next-Slide"). click (function ( "#mycarousel"). carousel ( 'next');}; $ ( "#mycarousel"). Carousel (1); }); </script> </body> </html>특정 매개 변수는 다음과 같은 Carousel () 메소드에서 설정할 수 있습니다.
이를 사용할 때는 플러그인을 초기화 할 때 다음과 같은 상태의 관련 매개 변수를 전달할 수 있습니다.
$ ( "#slidershow"). 회전식 ({interval : 3000});부트 스트랩 프레임 워크의 회전식 플러그인은 사용자에게 다음과 같이 몇 가지 특수 호출 방법을 제공합니다.
.carousel ( "cycle") : 왼쪽에서 오른쪽으로 재생;
.carousel ( "pause") : 루프 재생 중지;
.carousel ( "number") : 지정된 프레임으로 고리하고 첨자는 배열과 유사하게 0에서 시작합니다.
.carousel ( "prev") : 이전 프레임으로 돌아갑니다.
.carousel ( "Next") : 다음 프레임
데이터 속성을 사용하여 회전 목마를 제어하십시오.
<! doctype html> <html> <head> <title> bootstrap 인스턴스 - 회전식 플러그인 메소드 </title> <link href = "http://libs.baidu.com/bootstrap/3.0.3/css/bootsprap.min.css"rel = "script"> <스크립트 "> src = "http://libs.baidu.com/jquery/2.2.0.0/jquery.min.js"> </script> <script src = "http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"> data-wrap = "true"data-interval = "1000"> <!-회전식 표시기-> <ol> <li data-target = "#mycarousel"data-slide-to = "0"> </li> <li data-target = "#mycarousel"data-slide-to = "1"> <li data-target = "#mycarousel" "data-slide-to ="2. </ol> <!-회전식 프로젝트-> <div> <div> <IMG SRC = "/WP-Content/Uploads/2014/07/Slide1.png"> </div> <div> <IMG SRC = "/wp-content/uploads/2014/07/slide2.png"> <div> <IMG src = "/wp-content/uploads/2014/07/slide3.png"> </div> </div> <!-Carousel Navigation-> <a href = "#mycarousel"data-slide = "prev"> ‹</<a href = "#mycarousel"data-slide = "next"> </a> </a> </a> </a> Style = "Text-Align;"> "> <입력 유형 ="버튼 "값 ="start "> <입력 유형 ="버튼 "value ="pause "> <입력 유형 ="button "value ="이전 슬라이드 "> <입력 유형 ="버튼 = "다음 슬라이드"> <value = "slide ="button "> <slide"> input type = "value ="slide = "button"> <input type = "value"> </div> </div> </body> </html>
선언적 방법은 데이터 속성을 정의하여 구현되며, 이는 회전 목마의 위치를 쉽게 제어 할 수 있습니다. 주로 다음 유형을 포함합니다.
1. 데이터 리드 속성 : 값 회전 목마를 가져 와서 회전 목마에 정의하십시오.
2. 데이터 타겟 속성 : 값 회전 목마로 정의 된 ID 이름 또는 기타 스타일 식별자를 가져옵니다. 이전 예제에서 볼 수 있듯이 값을 "#SlidersHow"로 가져 와서 회전식 카우셀 카운터의 각 LI에서 정의하십시오.
3. Data-Slide 속성 : 값에는 이전, Next, Prev를 포함하여 뒤로 스크롤하는 것을 의미하며 다음은 앞으로 스크롤하는 것을 의미합니다. 이 속성 값은 회전식 컨트롤러의 A 링크에 정의되며 컨트롤러 HREF 값은 컨테이너 4. 회전식의 ID 이름 또는 기타 스타일 식별자로 설정됩니다.
5. Data-Slide-to 속성 : Data-Slide-to = "2"와 같은 특정 프레임의 첨자를 전달하는 데 사용되며,이 지정된 프레임 (0에서 시작)으로 직접 리디렉션 할 수 있으며 회전식 카로셀 카운터의 각 LI에서 정의됩니다.
여기서 #SlidersHow 레이어에 슬라이드 스타일을 추가하고 이미지 및 이미지 스위칭 효과를 사용하여 매끄럽게 할 수 있습니다.
<div id = "slidershow"data-ride = "carousel"> ... </div>
데이터 리드 = "회전 목마", 데이터 슬라이드 및 데이터 슬라이드 투에 외에도 Carousel 구성 요소는 세 가지 다른 사용자 정의 속성을 지원합니다.
다음 코드는 "회전 목마가 지속적으로 루프하지 않습니다"와 "회전식 시간 간격은 1 초입니다"를 구현합니다.
<div id = "slidershow"data-ride = "carousel"data-wrap = "false"data-interVal = "1000"> .... </div>
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 테이블 사용 자습서
부트 스트랩 플러그인 사용 튜토리얼
멋진 주제 공유 : jQuery 사진 회전 목마 JavaScript 사진 회전 목마 부트 스트랩 사진 회전 목마
위의 것은 JavaScript 사진 회전 목마에 대한 자세한 소개입니다. 이 기사가 JavaScript 프로그래밍을 배우는 모든 사람들에게 도움이되기를 바랍니다.