2017.1.08用bootstrap構造響應式輪播圖
阿新 • • 發佈：2019-01-31
要求：利用bootstrap中的carousel外掛建立一個響應式輪播圖，輪播圖要求是：1、當螢幕為大螢幕時讓輪播圖中的圖片大小為2000px*410px大小，當螢幕寬度小於768px時，輪播圖中的圖片大小為640px*340px；2：當螢幕為小螢幕時，:螢幕進行縮放時，高度並不固定，高度能隨著水平縮放進行縮放；3：當瀏覽器是手機模式時，是輪播圖能夠跟隨使用者手指的觸控進行滑動。
知識點：
1、手機觸控事件touch
觸控事件會在使用者將手指放在螢幕上、或者在螢幕上滑動、以及手指離開螢幕時開始
touchstart事件：當手指放在螢幕上觸發，當手指已經放在螢幕上時也會觸發。
touchmove事件：當手指在螢幕上滑動觸發，在這個事件發生期間，呼叫preventDefault()事件可以阻止滾動。
touchend事件：當手指離開螢幕時觸發
touches：表示當前跟蹤的觸控操作的touch物件的陣列。
targetTouches：特定於事件目標的Touch物件的陣列。
changeTouches：表示自上次觸控以來發生了什麼改變的Touch物件的陣列。
每個Touch物件包含的屬性如下。
clientX：觸控目標在視口中的x座標。
clientY：觸控目標在視口中的y座標。
identifier：標識觸控的唯一ID。
pageX：觸控目標在頁面中的x座標。
pageY：觸控目標在頁面中的y座標。
screenX：觸控目標在螢幕中的x座標。
screenY：觸控目標在螢幕中的y座標。
target：觸控的DOM節點目標。
2.輪播圖可以通過js來除錯
例如：$(".carousel").carousel();
$(".carousel").carousel("next")輪播迴圈播放到下一張圖片；
$(".carousel").carousel("prev")輪播迴圈播放到上一張圖片
HTML程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <title></title> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"> </head> <style> .carousel .carousel-inner .item{ background-repeat: no-repeat; background-position: center center; background-size: cover; } .carousel .carousel-inner .item{ width: 100%; } /*當螢幕為大螢幕時，將輪播的項高度設為410px，則螢幕為小螢幕時由圖片撐起輪播項高度*/ @media (min-width: 768px){ .carousel .carousel-inner .item{ height: 410px; } } </style> <body> <section id="slider" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#slider" data-slide-to="0" class="active"></li> <li data-target="#slider" data-slide-to="1"></li> <li data-target="#slider" data-slide-to="2"></li> <li data-target="#slider" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <!-- 根據螢幕的寬度設定輪播圖中圖片的大小，當圖片為大螢幕時設定輪播圖的圖片為img-lg的圖片，圖片為小螢幕時設定輪播圖的圖片為img-xs的圖片 --> <div class="item active" data-img-lg="img/slide_01_2000x410.jpg" data-img-xs="img/slide_01_640x340.jpg"> </div> <div class="item" data-img-lg="img/slide_02_2000x410.jpg" data-img-xs="img/slide_02_640x340.jpg"> </div> <div class="item" data-img-lg="img/slide_03_2000x410.jpg" data-img-xs="img/slide_03_640x340.jpg"> </div> <div class="item" data-img-lg="img/slide_04_2000x410.jpg" data-img-xs="img/slide_04_640x340.jpg"> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#slider" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#slider" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </section> <script src="lib/jquery/jquery.js"></script> <script src="lib/bootstrap/js/bootstrap.js"></script> <script src="js/my.js"></script> </body> </html>
Js程式碼：
$(function() {
function resize() {
//獲取螢幕寬度
var windowWidth = $(window).width();
//判斷當前螢幕是大螢幕還是小螢幕
var isSmallWidth = windowWidth < 768;
//遍歷輪播圖中每一項
$(".carousel-inner>.item").each(function(i, item) { //需要將DOM物件轉化為jqurey物件，才能呼叫jquery方法
var $item = $(item);
//根據螢幕寬度給輪播圖中的背景圖片設定為大圖片或是小圖片
var imgUrl = isSmallWidth ? $item.data("img-xs") : $item.data("img-lg");
$item.css('backgroundImage', 'url("' + imgUrl + '")');
//當螢幕為小螢幕時，給輪播圖加上圖片項，使其能夠進行等比例縮放
if (isSmallWidth) {
$item.html("<img src='" + imgUrl + "'>");
}
//否則清除輪播圖中的圖片內容，以免出現圖片重疊
else {
$item.empty();
}
})
}
//觸發resize事件
$(window).on("resize", resize)
.trigger("resize");
//當瀏覽器為手機螢幕時，加上手指滑動輪播圖的效果
//首先，根據手指觸控的輪播圖的位置的到使用者手指的起始座標
var $carousel=$(".carousel");
var startClientX=0;
var clientX=30;
$carousel.on("touchstart",function(e){
startClientX=e.originalEvent.touches[0].clientX;
})
$carousel.on("touchmove",function(e){
//然後的得到使用者移動後的座標
var targetClientX=e.originalEvent.touches[0].clientX;
//判斷使用者移動的距離是否超過了閾值
var target=Math.abs(targetClientX-startClientX);
if(target>clientX){
//然後，根據使用者移動的方向判斷使用者是左滑動還是右滑動，根據左右方向觸發左右滑動
$(".carousel").carousel(targetClientX-startClientX>0?"prev":"next");
}
})