|
|
|
|
|
|
百葉窗過渡的幻燈片/輪播動畫【效果演示/源碼下載】
作者:admin 時間:2021-9-28 10:5:1 瀏覽:幻燈片/輪播動畫有各種各樣的效果，本文介紹一個百葉窗過渡的效果，喜歡的朋友可以直接下載源碼使用。
百葉窗過渡的幻燈片/輪播動畫效果是這樣的，一次只能看到其中一個圖像，我們的 JavaScript 代碼將添加許多span用作垂直百葉窗的元素，并將絕對定位在可見圖像的上方，因此它們可以隱藏它。幾秒鐘后，百葉窗將關閉，圖像將改變。它們將再次打開，無限循環。
實例介紹
本實例是JQuery+CSS實現的。我們先來看看HTML部分。
HTML 代碼
很簡單。它包括一個容器元素和一個無序列表的圖像。一個active類被添加到第一個列表項，只是為了確保如果 JavaScript 關閉，圖像將是可見的。
<div class="container" id="container">
<ul>
<li class="active"><img src="photo_1.jpg" alt="" /></li>
<li><img src="photo_2.jpg" alt="" /></li>
<li><img src="photo_3.jpg" alt="" /></li>
<li><img src="photo_4.jpg" alt="" /></li>
</ul>
</div>
CSS 代碼
關于 CSS，我們指定容器的position和overflow屬性，從ul和li元素中刪除任何樣式，將列表項設置為不可見（標記為active的除外），最后指定span元素的一些屬性，這些屬性將充當百葉窗（稍后我會談到）。
.container
{
position: relative;
overflow: hidden;
}
.container span
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
}
.container ul, .container li
{
padding: 0;
margin: 0;
list-style: none;
}
.container li
{
display: none;
}
.container li.active
{
display: inline;
}
JavaScript 代碼
本實例用了jQuery編程，因此不要忘了在開頭引用jQuery庫文件，如：
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
下面是實現代碼。
注意：除了兩個函數之外的所有內容都將包含在一個$(document).ready()函數中。
首先，我們需要指定幾個選項：
var width = 960;
height = 538;
var numberOfBlinds = 20;
var margin = 2;
var color = '#000';
gapHeight = 100;
width和height參考圖像的尺寸；numberOfBlinds百葉窗葉片數量；margin設置百葉窗之間的距離；color設置百葉窗的顏色；gapHeight設置間隙的總高度（用于創建不均勻的百葉窗效果）。
往后，我們設置container的width和height為剛才我們聲明的值，以及計算每個葉片的寬度。
var container = $('#container');
container.width(width).height(height);
var blindWidth = width / numberOfBlinds;接下來，我們開始處理圖像。我們遍歷圖像列表，將它們作為 jQuery 對象存儲在images數組中。然后，我們將列表的第一個圖像設置為active，并初始化一個值以跟蹤哪個圖像是活動的。
images = new Array();
$('ul li', container).each(function() {
images.push($(this));
});
images[0].addClass('active');
activeImage = 0;
在存儲到$(document).ready()函數中的代碼的最后一部分中，我們創建了百葉窗。
在for循環內，我們使用calculateBorders函數為每個span元素（即百葉窗葉片）的邊界計算不同的值，并相應地設置它們的 CSS 值。
每個span生成后，它都被添加到容器中。最后，我們將span元素的選擇器存儲在一個變量中，并指示瀏覽器在一秒鐘（即 1000 毫秒）后執行animateBorders函數。
for (var i = 0; i < numberOfBlinds; i++) {
var tempEl = $(document.createElement('span'));
var borders = calculateBorders();
tempEl.css({
'left': i * blindWidth,
border: margin + 'px solid ' + color,
borderTop: borders.borderWidthTop + 'px solid ' + color,
borderBottom: borders.borderWidthBottom + 'px solid ' + color,
'height': height,
'width': blindWidth
});
container.prepend(tempEl);
};
blinds = $('span', container);
setTimeout(animateBorders, 1000);該calculateBorders函數會隨機選擇1 到 9 之間的一個值，然后將其用作百分比，根據我們之前指定的變量gapHeight計算每個百葉窗上下邊框的高度，并將這些值作為對象返回。
舉個例子，假設隨機變量是3。因此，根據gapHeight設置為100，百葉窗上邊框的高度為30，下邊框的高度為70。
function calculateBorders() {
var random = Math.floor((Math.random()*9)+1);
var borderWidthTop = (random / 10) * gapHeight;
var borderWidthBottom = gapHeight - borderWidthTop;
return {borderWidthTop: borderWidthTop, borderWidthBottom: borderWidthBottom};
}我們的最后一個函數被稱為animateBorders，它負責實際動畫邊界，并執行圖像之間的過渡。因此，我們指示所有百葉窗將其邊框設置為容器的整個高度，從而隱藏圖像。在animate函數的回調中，我們再次計算邊界（因此它們可以隨機改變），經過一小段延遲后，我們再次將它們設置為新值的動畫。
最后但并非最不重要的是，有一小部分代碼只執行一次。在那里，我們從當前可見的圖像中刪除active類，迭代activeImage變量，添加active類到列表的下一個圖像，最后，指示瀏覽器再次運行animateBorders3秒（即3000毫秒）后的功能。
function animateBorders() {
var changeOccuredOnce = false;
blinds.animate({
borderTopWidth: height / 2,
borderBottomWidth: height / 2
}, 1000, function() {
if(!changeOccuredOnce) {
images[activeImage].removeClass('active');
activeImage = (activeImage + 1) % images.length;
images[activeImage].addClass('active');
setTimeout(animateBorders, 3000);
changeOccuredOnce = true;
}
var borders = calculateBorders();
$(this).delay(300).animate({
borderTopWidth: borders.borderWidthTop,
borderBottomWidth: borders.borderWidthBottom
}, 1000);
});
}至此，本實例主要代碼就介紹完畢了，喜歡的朋友可以直接下載本實例源碼使用。
您可能對以下文章也感興趣
