부트 스트랩을 사용하여 회전식 이미지 회전 목마를 작성하면 많은 시간을 절약 할 수 있습니다. Image Carousel은 웹 페이지의 일반적인 기술이지만 직접 작성하면 긴 JavaScript 인코딩이 필요하며 크기를 쉽게 제어 할 수 없습니다.
또한 회전 목마라는 단어의 원래 의미는 메리가 돌아 다니는 말이라고 말씀 드리겠습니다.
1. 기본 목표
회전 목마 웹 페이지에 여러 장의 사진을 작성하기위한 회전 목마, 마우스에 마우스가 놓여지고 이미지 설명은 각 그림 아래에 제공됩니다.
저자의 컴퓨터 비디오 녹화 소프트웨어는 상당히 나쁘기 때문에 너무 많은 시간을 할 필요가 없다고 생각합니다. 그는 문제를 설명 할 수있는 한 아래의 GIF는 더 색이 더 많지만 기본 효과는 여전히 표시됩니다.
Bootstrap의 그림 회전 목마 구성 요소 인 Carousel은 IE6 및 7과 호환되지 않습니다. IE6 지원이 필요한 경우이 웹 사이트에서 Bootstrap의 IE6 구성 요소 지원을 다운로드해야합니다 (링크를 열려면 클릭하십시오). 동시에 Google Chrome의 이미지 파일 설명은 약간 검은 색을 스며 들지만 탐색에는 영향을 미치지 않습니다.
다른 브라우저의 프레젠테이션 상황은 다릅니다. IE8의 효과는 다음과 같습니다.
2. 기본 아이디어
다음 이미지의 페이지 레이아웃을 참조하십시오.
3. 생산 과정
1. 이전의 첫 번째 단계 "현재 웹 페이지에서 닫을 수있는 대화 상자를 작성하는 부트 스트랩"(링크를 열려면 클릭)
부트 스트랩을 사용해야하므로 공식 웹 사이트에서 구성 요소를 다운로드 할 수 있습니다 (링크를 열려면 클릭하십시오). 생산 환경에서 사용되는 부트 스트랩 버전은 2와 호환되지 않습니다. 개발 문서에 따라 BootStrap3을 직접 사용하는 것이 좋습니다. 이 기사는 Bootstrap3을 기반으로합니다. 동시에 BootStrap3에서 제공하는 JavaScript 효과는 jQuery 1.11에서 지원되어야합니다 (링크를 열려면 클릭하십시오). 이전 브라우저 IE6과 호환되지 않는 JQuery2의 공식 웹 사이트에서 이전 브라우저 IE6과 호환되는 jQuery 1.11을 다운로드 할 수 있습니다. 다운로드 후 사이트 디렉토리를 구성하십시오. Bootstrap3를 사이트 디렉토리로 직접 압축하고 JS 디렉토리에 jQuery-1.11.1.js를 배치합니다. 사이트 폴더의 구조는 다음과 같습니다.
2. 다음은 웹 페이지의 전체 코드이며 다음 부분에 대해 설명합니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w.w.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><Html xmlns = "http://www.w3.org/1999/xhtml"> <head> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <meta name = "viewport"content = "width = device-width, initial-scale = 1.0, user-s-scallable href = "css/bootstrap.css"rel = "stylesheet"media = "screen"> <script type = "text/javaScript"src = "js/jquery-1.11.1.js"> </script> <script type = "text/javascript"src = "js/bootstrap.js"> </head> <body> <div> <div> <h1> 사진 회전 목마 </h1> </div> <div> <div id = "carousel"data-ride = "carousel"data-interval = "1000"> <ol> <li data-target = "#carousel-example-generic"data-slide-to = "0"> </li " data-slide-to = "1"> </li> <li data-target = "#carousel-example-generic"data-slide-to = "2"> </li> </ol> <div role = "listbox"> <div> <a href = "images/img0.jpg"> img src = "image/img0.jpg"> </a> <<h3> </h3> <p> 이미지 설명 I Am Img0 </p> </p> </div> </div> <div> <a href = "images/img10.jpg"> <img src = "images/img10.jpg"> </a> <div> <h3> img10 </h3> <p> 이미지 설명 i </p> </p> </p> </p> </p> href = "images/img2.jpg"> <img src = "images/img2.jpg"> </a> </a> <div> <h3> img2 </h3> <p> Im img2 </p> </div> </div> <a href = "#carousel-example-generic"rel = "preor-slide" "preor-slide" "</div> </div> </div> <a href = "#carousel-example-generic"lole = "button"data-slide = "next"> <span> </span> </a> </div> </div> </div> </body> </html>
(1) <head> 부분
<head> <!-웹 인코딩 선언은 브라우저 크기에 자동으로 적응합니다. 부트 스트랩의 CSS를 사용하려면 jQuery 지원이 필요합니다. bootstrap의 js, title-> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <meta name = "viewport"content = "width = device-width, device-width, user-scalable = no"> 링크 href = "css/bootstrap.cs" 미디어 = "화면"> <script type = "text/javaScript"src = "js/jquery-1.11.1.js"> </script> <script type = "text/javaScript"src = "js/bootstrap.js"> </script> <title> 그림 carousel </title> </head>
(2) <body> 부분
먼저 웹 페이지의 모든 요소가 웹 페이지의 중앙에 속할 수있는 컨테이너 컨테이너를 선언 한 다음이 컨테이너에 요소를 씁니다.
먼저 헤더를 쓰고 헤더를 선언 한 다음 그 안에 텍스트를 씁니다.
<div> <h1> 사진 회전 목마 </h1> </div>
그런 다음 이미지 회전 목마 구성 요소를 표준화하는 데 사용되는 이름없는 레이어 DIV를 정의하십시오. 부트 스트랩 이미지 회전 목마 구성 요소의 크기는 내부의 요소에 대해 지정할 수 없으며 너비 및 높이 매개 변수가 추가됩니다. 이렇게하면 그림 회전 목마 구성 요소가 왜곡됩니다. 동시에이 구성 요소를 중심으로하려면 마진 오른쪽을 사용해야합니다. 마진 좌파 : 자동; 구속 조건의 DIV의 스타일 속성에서. 추가 Align = "Center"는 전혀 영향을 미치지 않습니다.
마지막으로 그림 구성 요소의 각 부분에 대한 자세한 설명이 있습니다.
<div> <!-그림 회전 목마 구성 요소의 이름은 회전식이며 부트 스트랩에는 데이터 리드 요소가 필요합니다. Data-InterVal의 값은 1000 밀리 초마다 이미지를 변경하는 것입니다. 이 값이 너무 많으면 구성 요소가 왜곡됩니다-> <div id = "carousel"data-ride = "carousel"data-interVal = "1000"> <!-여기에 정의 된 몇 가지 그림이 있습니다. 사진이 하나 더 있으면 아래에 항목이 하나 더 추가됩니다. Data-Slide-to의 값이 추가됩니다. 첫 번째 그림, 즉 0 번째 그림은 클래스 = "active"가 있어야합니다. 그렇지 않으면 구성 요소가 작동하지 않아야합니다. 그렇지 않으면 구성 요소가 작동하지 않아야합니다.-> <ol> <li data-target = "#carousel-example-generic"data-slide-to = "0"> </li> <li data-target = "#carousel-example-Generic"data-slide-to = "1"> <li target =#carousel-target " data-slide-to = "2"> </li> </ol> <div role = "listbox"> <!-다음은 각 사진의 상세한 편집입니다. 첫 번째 그림의 클래스 값은 항목 활성화되어야하고 나머지는 항목입니다-> <div> <!-IMG0.JPG의 하이퍼 링크를 열려면 IMG0.jpg 이미지를 클릭합니다. 하이퍼 링크가 없으면 <a> tag-> <a href = "images/img0.jpg"> <img src = "images/img0.jpg"> </a> <div> <!-그림 아래의 텍스트 설명-> <h3> img0 </h3> <p> 그림 아래의 그림 설명 I img0 </div> </div> </div> </div> </div> </div> href = "images/img10.jpg"> <img src = "images/img10.jpg"> </a> </a> </a> </a> </a> <div> <h3> iM img10 </p> </div> </div> <div> <a href = "images/img2.jpg"> src = "images/img2.jpg"> </a> <div> <h3> img2 </h3> <p> i am img2 </p> </div> </div> </div> <!-여기에 왼쪽과 오른쪽 고정 프레임 코드를 생각하는 두 개의 버튼이 있습니다. <a href = ""#carousel-generic ""#generic ""#generic ""#generic "" <span> </span> </a> <a href = "#carousel-example-generic"robile = "button"data-slide = "next"> <span> </span> </div> </div>
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.