플러그의 부트 스트랩 회전 목마보기를 채팅

작업을 할 때 오늘날, 수백 번을 수행하고, 부트 스트랩 회전 목마 맵을 사용, 암웨이는이 플러그인을 볼 필요를 느끼지, 회전 목마 맵이 필요합니다. 기능은 부트 스트랩 플러그인이 첫 번째 선택, 너무 멋진 필요하지 않습니다.

용도

JS와 CSS의 도입

직접 소개 bootsrap.js 및 bootstrap.css 두 개의 파일.

HTML 코드 샘플


<div id="myCarousel" class="carousel slide"> <!-- 轮播（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="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> <div class="carousel-caption">标题 1</div> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> <div class="carousel-caption">标题 2</div> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> <div class="carousel-caption">标题 3</div> </div> </div> <!-- 轮播（Carousel）导航 --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

이상 초보자 튜토리얼에서 위의 예를 직접 복사. 적절하게 정리 따르면.

JS 초기화

$ ( '. 회전 목마'). 회전 목마 ()
회전 목마 설정할 수있는 몇 가지 옵션이 있습니다.

간격 : 간격 회전 목마, 기본값 5000

일시 : 일시 중지 할 때, 기본값이 가져가 마우스를 위로 마우스를 이동 한 다음 일시 중지되었습니다. 값에 상관없이 일시 중단되지 얼마나 의미가없는, null로.

포장 : 시리얼, 기본값은 사실이다 회전 목마 여부를 지정합니다.

키보드 : 해당 키보드 여부, 기본값은 사실이다.

어떤 방법 이벤트

//轮播事件为200
$('#identifier').carousel({
    interval: 2000
})
//从左到右循环轮播

$('#identifier').carousel('cycle')
//停止轮播
$('#identifier').carousel('pause')
//轮播到某一帧

$('#identifier').carousel(0)
$('#identifier').carousel(1)
//轮播到上一个项目

$('#identifier').carousel('prev')
//轮播到下一个项目

$('#identifier').carousel('next')

콜백 기능

//滑动时出发的回调

$('#identifier').on('slide.bs.carousel', function () {
    // 执行一些动作...
 })
 
 //完成滑动过渡效果后，触发的事件
 
$('#identifier').on('slid.bs.carousel', function () {
    // 执行一些动作...
 })

예를 들면 자신의 사용

어디 가지 점프를 구할 수있는 곳을 클릭

var car = $(".carousel");
car.carousel('pause');
$("#firstLi").bind("click", function() {
    car.carousel(0);
    car.carousel('pause');
});

$("#secondLi").bind("click", function() {
    car.carousel(1);
    car.carousel('pause');
});

이점은 무엇입니까

나를 swiper 플러그인에 대해 이야기 해 보자. 그는 정말 쉽게 강력하고 사용하지만, IE8을 지원하지 않습니다. Swiper2 지원 IE8 버전은 자동 높이 조절 기능을 지원하지 않습니다.
올빼미 회전 목마 자동 높이 조정, 지원 IE8을 지원합니다.하지만 그는 IE8에서 깜박이는 문제가있는 것, 공식 웹 사이트는 또한이 문제를 가지고, 그것은 버그이다.
최우선의 마지막 부트 스트랩 회전 목마보기.