이 기사의 주요 내용은 내비게이션 바 아래의 회전 목마 그림을 만들어 참조를위한 최신 중요한 뉴스를 자동으로 재생하는 것입니다. 특정 내용은 다음과 같습니다
1. 반응 형 회전식 다이어그램
// 반응 형 회전식 다이어그램
<div id = "mycarousel"> <ol> <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> </li> 스타일 = "배경 :#223240;"> <a href = "#"> <img src = "img/slide1.png"> </a> </div> <div style = "background :#f5e4dc;"> <a href = "#"> <img/slide2.png "> 스타일 = "배경 :#de2a2d;"> <a href = "#"> <img src = "img/slide3.png"> </a> </div> </div> <a href = "#mycarousel"data-slide = "prev"> ‹</a> <a href = "#mycarousel"next "> </a> </a> </a>
// 필요한 jQuery 컨트롤
$ ( '#mycarousel'). 회전식 ({// 자동 재생 설정/2 초 간격 : 3000,});// 회전식 화살표 위치를 조정합니다
$ ( '. carousel-inner img'). eq (1) .height () || $ ( '. carousel-inner img'). eq (1) .height () || $ ( '. carousel-inner img'). eq (2) .height (); $ ( '. carousel-inner img'). eq (2) .height (); $ ( '. carousel-inner img'). eq (2) .height (); $ ( '. carousel-control'). css ( 'line-height', $ height + 'px');});
// 필요한 CSS
A : 초점 {개요 : 없음;}. Navbar-Brand {Padding : 0;}#myCarousel {마진 : 50px 0 0 0;}. carousel-inner .item img {margin : 0 auto;}. Carousel-Control {font-size : 100px;}.여전히 깊이 배우고 싶다면 여기를 클릭하여 멋진 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서 부트 스트랩 실용 튜토리얼
멋진 주제 공유 : jQuery 사진 회전 목마 JavaScript 사진 회전 목마 부트 스트랩 사진 회전 목마
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.