Bootstrap 旋轉(zhuǎn)木馬

2018-03-03 16:35 更新

Carousel（旋轉(zhuǎn)木馬）是一個響應幻燈片插件，modal是一個燈箱式的插件。

每個旋轉(zhuǎn)木馬插件有三個子部分：指示器，body和控件。

創(chuàng)建旋轉(zhuǎn)木馬的標記如下：

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript"
  src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</head>
  <body style="margin:30px">
<div id="bestCarsCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#bestCarsCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#bestCarsCarousel" data-slide-to="1"></li>
        <li data-target="#bestCarsCarousel" data-slide-to="2"></li>
    </ol>
    <!-- Wrapper for slides  -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="http://placehold.it/1000x300">
            <div class="carousel-caption">
                <h3>Car 1</h3>
                <p>Lorem ipsum  dolor  sit amet,  consectetur ...</p>
            </div>
        </div>
        <div class="item">
            <img src="http://placehold.it/1000x300">
            <div class="carousel-caption">
                <h3>Car 2</h3>
                <p>Lorem ipsum  dolor  sit amet,  consectetur ...</p>
            </div>
        </div>
        <div class="item">
            <img src="http://placehold.it/1000x300">
            <div class="carousel-caption" >
                <h3>Car 3</h3>
                <p>Lorem ipsum  dolor  sit amet,  consectetur ...</p>
            </div>
        </div>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#bestCarsCarousel" data-slide="prev">
        <span  class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#bestCarsCarousel" data-slide="next">
        <span  class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
  </body>
</html>

通過data屬性激活旋轉(zhuǎn)木馬

我們可以通過data屬性來控制旋轉(zhuǎn)木馬的位置。

data-slide屬性接受關鍵字prev或next，這將改變幻燈片相對于當前位置的位置。

data-slide屬性通常應用于上一個和下一個按鈕。

我們可以使用 data-slide-to將原始幻燈片索引傳遞到旋轉(zhuǎn)木馬幻燈片。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
h2{
    margin: 0;     
    color: #666;
    padding-top: 90px;
    font-size: 52px;
    font-family: "trebuchet ms", sans-serif;    
}
.item{
    background: #333;    
    text-align: center;
    height: 300px !important;
}
.carousel{
    margin-top: 20px;
}
.bs-example{
  margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
    <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
      <!-- Carousel indicators -->
        <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 items -->
        <div class="carousel-inner">
            <div class="active item">
                <h2>Slide 1</h2>
             <div class="carousel-caption">
                  <h3>First slide label</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="item">
                <h2>Slide 2</h2>
                <div class="carousel-caption">
                  <h3>Second slide label</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="item">
                <h2>Slide 3</h2>
                <div class="carousel-caption">
                  <h3>Third slide label</h3>
                  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                </div>
            </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div>
</body>
</html>

通過JavaScript激活旋轉(zhuǎn)木馬

我們可以使用JavaScript手動激活旋轉(zhuǎn)木馬，使用wrapper元素的“id”或“class”選擇器調(diào)用carousel()方法。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // Activate carousel
    $("#myCarousel").carousel();
    
    // Enable carousel control
  $(".left").click(function(){
      $("#myCarousel").carousel("prev");
    });
    $(".right").click(function(){
      $("#myCarousel").carousel("next");
    });
    
    // Enable carousel indicators
    $(".slide-one").click(function(){
      $("#myCarousel").carousel(0);
    });
    $(".slide-two").click(function(){
      $("#myCarousel").carousel(1);
    });
    $(".slide-three").click(function(){
      $("#myCarousel").carousel(2);
    });
});
</script>
<style type="text/css">
h2{
    margin: 0;     
    color: #666;
    padding-top: 90px;
    font-size: 52px;   
}
.item{
    background: #333;    
    text-align: center;
    height: 300px !important;
}
.carousel{
    margin-top: 20px;
}
.bs-example{
  margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
    <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
      <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li class="slide-one active"></li>
            <li class="slide-two"></li>
            <li class="slide-three"></li>
        </ol>   
        <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="active item">
                <h2>Slide 1</h2>
             <div class="carousel-caption">
                  <h3>First slide label</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="item">
                <h2>Slide 2</h2>
                <div class="carousel-caption">
                  <h3>Second slide label</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="item">
                <h2>Slide 3</h2>
                <div class="carousel-caption">
                  <h3>Third slide label</h3>
                  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                </div>
            </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div>
</body>
</html>

選項

有一些選項可以傳遞給carousel()方法自定義旋轉(zhuǎn)木馬的小部件。

名稱類型默認值描述
interval 數(shù)值 5000 在自動循環(huán)中設置一個幻燈片到另一個幻燈片之間的延遲時間（以毫秒為單位）。 如果為false，旋轉(zhuǎn)木馬不會自動循環(huán)。
pause 字符串 "hover" 鼠標進入時暫停旋轉(zhuǎn)木馬的循環(huán)，并在鼠標離開時恢復旋轉(zhuǎn)木馬的循環(huán)。
wrap boolean（布爾值） true 設置旋轉(zhuǎn)木馬應該連續(xù)循環(huán)還是硬停止。
keyboard boolean（布爾值） true 設置旋轉(zhuǎn)木馬是否應對鍵盤事件做出反應。

以下示例顯示如何使用這些選項。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
     $("#myCarousel").carousel({
         interval : 1000,
         pause: false
     });
});
</script>
<style type="text/css">
h2{
    margin: 0;     
    color: #666;
    padding-top: 90px;
    font-size: 52px;
    font-family: "trebuchet ms", sans-serif;    
}
.item{
    background: #333;    
    text-align: center;
    height: 300px !important;
}
.carousel{
    margin-top: 20px;
}
.bs-example{
  margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Carousel indicators -->
        <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 items -->
        <div class="carousel-inner">
            <div class="active item">
                <h2>Slide 1</h2>
             <div class="carousel-caption">
                  <h3>First slide label</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="item">
                <h2>Slide 2</h2>
                <div class="carousel-caption">
                  <h3>Second slide label</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="item">
                <h2>Slide 3</h2>
                <div class="carousel-caption">
                  <h3>Third slide label</h3>
                  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                </div>
            </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div>
</body>
</html>
  • .carousel(options)
  • .carousel('cycle')
  • .carousel('pause')
  • .carousel(number)
  • .carousel('prev')
  • .carousel('next')

下面的代碼顯示了如何使用上面的方法。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  // Initializes the carousel
    $(".start-slide").click(function(){
      $("#myCarousel").carousel("cycle");
    });
  // Stops the carousel
    $(".pause-slide").click(function(){
      $("#myCarousel").carousel("pause");
    });
  // Cycles to the previous item
    $(".prev-slide").click(function(){
      $("#myCarousel").carousel("prev");
    });
  // Cycles to the next item
    $(".next-slide").click(function(){
      $("#myCarousel").carousel("next");
    });
  // Cycles the carousel to a particular frame 
    $(".slide-one").click(function(){
      $("#myCarousel").carousel(0);
    });
    $(".slide-two").click(function(){
      $("#myCarousel").carousel(1);
    });
    $(".slide-three").click(function(){
      $("#myCarousel").carousel(2);
    });
});
</script>
<style type="text/css">
h2{
    margin: 0;     
    color: #666;
    padding-top: 90px;
    font-size: 52px;
    font-family: "trebuchet ms", sans-serif;    
}
.item{
    background: #333;    
    text-align: center;
    height: 300px !important;
}
.carousel{
  margin: 20px 0;
}
.control-buttons{
  text-align:center;
}
.bs-example{
  margin: 20px;
} 
</style>
</head>
<body>
<div class="bs-example">
    <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
        <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="active item">
                <h2>Slide 1</h2>
             <div class="carousel-caption">
                  <h3>First slide label</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="item">
                <h2>Slide 2</h2>
                <div class="carousel-caption">
                  <h3>Second slide label</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="item">
                <h2>Slide 3</h2>
                <div class="carousel-caption">
                  <h3>Third slide label</h3>
                  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                </div>
            </div>
        </div>
    </div>
    <!-- Controls buttons -->
    <div class="control-buttons">
        <input type="button" class="btn btn-info start-slide" value="Start">
        <input type="button" class="btn btn-info pause-slide" value="Pause">
        <input type="button" class="btn btn-info prev-slide" value="Previous Slide">
        <input type="button" class="btn btn-info next-slide" value="Next Slide">
        <input type="button" class="btn btn-info slide-one" value="Slide 1">
        <input type="button" class="btn btn-info slide-two" value="Slide 2">            
        <input type="button" class="btn btn-info slide-three" value="Slide 3">
    </div>
</div>
</body>
</html>

事件

旋轉(zhuǎn)木馬具有以下事件。

事件 描述
slide.bs.carousel 當調(diào)用幻燈片實例方法時，此事件立即觸發(fā)。
slid.bs.carousel 當旋轉(zhuǎn)木馬完成其幻燈片切換時，會觸發(fā)此事件。

以下示例顯示旋轉(zhuǎn)木馬項目的滑動轉(zhuǎn)換已完全完成時日志中的消息。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#myCarousel").on("slid.bs.carousel", function () {
    console.log("The sliding transition of previous carousel item has been fully completed.");
  });
});
</script>
<style type="text/css">
h2{
    margin: 0;     
    color: #666;
    padding-top: 90px;
    font-size: 52px;
    font-family: "trebuchet ms", sans-serif;    
}
.item{
    background: #333;    
    text-align: center;
    height: 300px !important;
}
.carousel{
    margin-top: 20px;
}
.bs-example{
  margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
    <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
      <!-- Carousel indicators -->
        <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 items -->
        <div class="carousel-inner">
            <div class="active item">
                <h2>Slide 1</h2>
             <div class="carousel-caption">
                  <h3>Second slide label</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="item">
                <h2>Slide 2</h2>
                <div class="carousel-caption">
                  <h3>Second slide label</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="item">
                <h2>Slide 3</h2>
                <div class="carousel-caption">
                  <h3>Third slide label</h3>
                  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                </div>
            </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div>
</body>
</html>
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號