이미지 회전식 효과는 웹에서 볼 수 있으며 많은 사람들이 슬라이드 쇼라고도합니다. 디스플레이의 주요 효과는 오른쪽에서 왼쪽으로 재생되는주기에서 여러 사진을 재생하는 것입니다. 마우스가 그림 위로 떠날 때 재생하면 잠시 멈출 수 있습니다. 마우스가 오른쪽 하단에있는 점을 클릭하거나 클릭하면 해당 그림이 표시됩니다.
이 이미지 회전 목마 효과는 회전식 플러그인을 통해 부트 스트랩 프레임 워크에서 구현됩니다.
데모 효과의 스크린 샷 :
암호:
<! docType html> <html> <head> <meta charset = "utf-8"> <!-<link rel = "Stylesheet"href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.csss"> <styl = ""shelshet " href = "css/bootstrap.min.css"/> <style> body {padding : 10px; margin : 10px;} </style> </head> <lody> <div id = "myCarousel"> <!-1 단계 : Carousel 사진을위한 디자인 컨테이너. -> <!-#slidershow 레이어는 슬라이드 스타일을 추가하고 사진과 그림을 사용하여 효과를 전환하여 부드럽게 만들기-> <ol> <!-2 단계 : 회전식 사진 카운터를 설계하십시오. -> <li data-target = "#mycarousel"data-slide-to = "0"> </li> <li data-target = "#mycarousel"data-slide-to = "1"> </li> <li data-target = "#mycarousel"data-slide-to = "2"> </li> </ol> <!- 스텝 곡의 스타일을 사용합니다. 컨트롤-> <div> <IMG SRC = "http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"> <div> <h4> Title 1 </h4> <p> 이미지 1 </p> </div> <div> <IMG src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> <div> <h4> Title 2/H4> <p> Image 2 </p> </div> <img src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> <div> <h4> Title 2/H4> <p> Image 2 </p> </div> <img src = "http://images3.c-ctrip.com/rk/201403/yfdd580145a.png"> <div> <h4> Title Three </h4> <p> 그림 3 </p> </div> </div> <!-단계 4 : 캐 러셀 사진 컨트롤러 디자인. 왼쪽 회전 목마 제어 전달 및 뒤로 재생되는 컨트롤러를 재생합니다-> <a href = "#mycarousel"data-slide = "prev"> ‹<!-<a href = "#slidershow"robile = "button"data-slide = "prev">-> <span> </span> </a> <a href = "#mycarousel". data-slide = "next">› <span> </span> <!-<a href = "#carousel-example-generic"data-slide = "prev"> <span> </span> </a> <a href = "#carousel-example-generic" data-slide = "next"> <span> </span> </a>-> </div> <cript> $ ( '. carousel'). carousel () </script> <script> <script> <text/javaScript "src ="js/jquery.min.js "> </script> <script type ="text/javascript " src = "js/bootstrap.min.js"> </script> <!-<script src = "http://libs.baidu.com/jquery/1.9.0/jquery.js">-> <!-<script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>-> </body> </html>/html> /* bootstrap.css 파일 줄 5835에서 줄 5863*/. carousel- 인디케이터 {carousel-indicators. /*전체 계수 영역의 절대 위치*/하단 : 10px; /*10px 컨테이너 회전 목마의 바닥에서*/z-index : 15; /*z 축에서 레벨을 설정*//*전체 계수 영역을 레벨에서 중심*/왼쪽 : 50%; 폭 : 60%; 패딩-왼쪽 : 0; 마진-왼쪽 : -30%; 텍스트-정렬 : 중심; 목록 스타일 : 없음;}. 회전식 인디케이터 li {display : inline-block; width : 10px; margin; margin : 1px; -999px; 커서 : 포인터; 배경색 : #000/9; 배경색 : RGBA (0, 0, 0, 0); 테두리 : 1px Solid #fff; Border-Radius : 10px;}/*현재 상태 스타일을 설정*/. 회전식 {width : 12px;그림 회전 목마-선언적 터치 회전 목마를 플레이하는 것
회전 목마 다이어그램을 트리거하는 두 가지 방법이 있습니다. 하나는 선언적이고 다른 하나는 JavaScript입니다. 먼저 선언적 방법을 살펴 보겠습니다.
선언적 방법은 데이터 속성을 정의하여 구현되며, 이는 회전 목마의 위치를 쉽게 제어 할 수 있습니다. 주로 다음 유형을 포함합니다.
• 데이터 리더 속성 : 값 회전 목마를 가져 와서 회전 목마에 정의하십시오.
• 데이터 표적 속성 : 값 회전 목마로 정의 된 ID 이름 또는 기타 스타일 식별자를 가져옵니다. 이전 예제에서 볼 수 있듯이 값 "#SlidersHow"를 가져 와서 회전식 카우셀 카운터의 각 LI에서 정의하십시오.
• 데이터 슬라이드 속성 : 값에는 이전, 다음, 이전, 이전을 뒤로 스크롤하는 것을 의미하며 다음은 앞으로 스크롤하는 것을 의미합니다. 이 속성 값은 회전식 컨트롤러의 A 링크에 정의되며 컨트롤러 HREF 값은 컨테이너 회전 목마의 ID 이름 또는 기타 스타일 식별자로 설정됩니다.
• Data-Slide-to 속성 : Data-Slide-to = "2"와 같은 특정 프레임의 첨자를 전달하는 데 사용되며,이 지정된 프레임 (0에서 시작)으로 직접 리디렉션 할 수 있으며 회전식 카로셀 카운터의 각 LI에서 정의됩니다.
데이터 리드 = "회전 목마", 데이터 슬라이드 및 데이터 슬라이드 투에 외에도 Carousel 구성 요소는 세 가지 다른 사용자 정의 속성을 지원합니다.
| 속성 이름 | 유형 | 기본값 | 설명하다 |
| 데이터 간판 | 숫자 | 5000 | 슬라이드 회전의 대기 시간 (밀리 초). False 인 경우 회전 목마가 루프를 자동으로 시작하지 않습니다. |
| 데이터에 대한 | 끈 | 호버 | 기본 마우스가 슬라이드 영역에 매달리고 떠날 때 재생이 시작됩니다. |
| 데이터 랩 | 부울 가치 | 진실 | 회전 목마 연속 루프입니다 |
다음 코드는 "회전 목마가 지속적으로 루프하지 않습니다"와 "회전식 시간 간격은 1 초입니다"를 구현합니다.
<div id = "slidershow"data-ride = "carousel"data-wrap = "false"data-interVal = "1000"> ...... </div>
위의 세 가지 속성은 컨테이너 요소 또는 식별자 (또는 왼쪽 및 오른쪽 제어 링크)에서 정의 될 수 있지만 후자의 정의는 우선 순위가 높습니다.
이미지 회전식-자바 스크립트 트리거 메소드
세 가지 문장 데이터-리드 = "Carousel"및 data-slide = "prev"및 data-slide = "next"가 제거되었습니다. JS 코드를 사용하여 "자동 사진 회전 목마"및 "전방 및 후진 버튼"의 함수를 구현하겠습니다.
JS를 사용하여 "자동 사진 회전 목마"및 "전방 및 후진 버튼"의 기능을 구현하십시오.
기본적으로, 데이터-라이드 = "회전 목마"속성이 회전식 컨테이너에 정의되면, 캐로 셀 이미지 스위칭 효과는 페이지가로드 된 후 자동으로로드됩니다. 데이터 리드 속성이 정의되지 않으면 회전식 이미지 스위칭을 JavaScript 메소드를 통해 트리거 할 수 있습니다. 특정 사용 방법은 다음과 같습니다.
코드 사본은 다음과 같습니다.
$ ( ". carousel"). carousel ();
컨테이너 ID로 지정할 수도 있습니다.
코드 사본은 다음과 같습니다.
$ ( "#slidershow"). carousel ();
특정 매개 변수는 다음과 같은 Carousel () 메소드에서 설정할 수 있습니다.
| 속성 이름 | 유형 | 기본값 | 설명하다 |
| 간격 | 숫자 | 5000 | 슬라이드 회전의 대기 시간 (밀리 초). False 인 경우 회전 목마가 루프를 자동으로 시작하지 않습니다. |
| 정지시키다 | 끈 | 호버 | 기본 마우스가 슬라이드 영역에 매달리고 떠날 때 재생이 시작됩니다. |
| 포장하다 | 부울 가치 | 진실 | 회전 목마 연속 루프입니다 |
이를 사용할 때는 플러그인을 초기화 할 때 다음과 같은 상태의 관련 매개 변수를 전달할 수 있습니다.
$ ( "#slidershow"). 회전식 ({interval : 3000});실제로 Carousel () 메소드의 매개 변수를 구성하면 회전식 효과를 자동으로 전환 할 수 있습니다. 그러나 부트 스트랩 프레임 워크의 회전식 플러그인은 사용자에게 다음과 같이 몇 가지 특별한 통화 방법을 제공합니다.
• .carousel ( "Cycle") : 왼쪽에서 오른쪽으로 재생됩니다.
• .carousel ( "pause") : 루프 재생 중지;
• .carousel ( "number") : 지정된 프레임으로 루프를, 첨자는 배열과 유사하게 0에서 시작합니다.
• .carousel ( "prev") : 이전 프레임으로 돌아갑니다.
• .carousel ( "Next") : 다음 프레임
예를 들어, 이전 호출 방법, 포워드 및 뒷면 버튼은 제대로 작동 할 수 없습니다. 실제로 .carousel ( "prev") 및 .carousel ( "next") 방법을 통해 정상적으로 작동하는 데 사용될 수 있습니다. 코드는 다음과 같습니다.
$ (function () {$ ( "#slidershow"). 회전식 ({interval : 2000}); $ ( "#slidershow a.left"). click (function () {$ ( ". carousel"). carousel ( "prev"); $ ( "#slidershow A.right "). 클릭 (function () {$ (". carousel "). carousel ("next ");});}); <! docType html> <html> <head> <meta charset = "utf-8"> <link rel = "stylesheet"href = "http://maxcdn.bootstrapcdn.com/boottrap/3.2.0/css/bootstrap.min.css"> Body {Padding : 10px; 10px;} </style> </head> <body> <div id = "Carousel-example"data-ride = "carousel"> <!-표시기-> <ol> <li data-target = "#carousel-example"data-slide-to = "0"> </li> <li data-target = "#carousel-example"data-example-to = "1"> </li> </li> Data-target = "#carousel-example"data-slide-to = "1"> </li> <li data-target = "#carousel-example"data-slide-to = "1"> </li> <li data-target = "#carousel-example"data-slide-to = "2"> </li> <!-Slides <div> <div> <im src = "http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home5.jpg"/><div>...</div></div> <div> <<<<<< img src = "http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home2.jpg"/><div>...</div></div> <div> <<<<<<< img src = "http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home3.jpg"/> <div>...</div></div><! href = "#carousel-example"data-slide = "next"> <span> </span> </a> </a div> <!-<cript> $ (function () {$ ( '. carousel'). carousel ();}); </script>->-> <script src = "js/jquery.min.js"> </script> src = "js/bootstrap.min.js"> </script> <!-<script src = "http://libs.baidu.com/jquery/1.9.0/jquery.js">-> <!-<script src = "http://maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>-> </body> </html>wulin.com은 부트 스트랩 관련 주제를 권장합니다.
부트 스트랩 구성 요소 작동 기술
부트 스트랩 관련 지식 요약
위는 편집기가 소개 한 부트 스트랩 회전식 회전 다이어그램의 사용 예에 대한 자세한 설명입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!