卡卡網(wǎng)

幻燈片/輪播動(dòng)畫有各種各樣的效果，本文介紹一個(gè)百葉窗過渡的效果，喜歡的朋友可以直接下載源碼使用。

百葉窗過渡的幻燈片/輪播動(dòng)畫效果是這樣的，一次只能看到其中一個(gè)圖像，我們的 JavaScript 代碼將添加許多span用作垂直百葉窗的元素，并將絕對定位在可見圖像的上方，因此它們可以隱藏它。幾秒鐘后，百葉窗將關(guān)閉，圖像將改變。它們將再次打開，無限循環(huán)。

demodownload

實(shí)例介紹

本實(shí)例是JQuery+CSS實(shí)現(xiàn)的。我們先來看看HTML部分。

HTML 代碼

很簡單。它包括一個(gè)容器元素和一個(gè)無序列表的圖像。一個(gè)active類被添加到第一個(gè)列表項(xiàng)，只是為了確保如果 JavaScript 關(guān)閉，圖像將是可見的。

<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 代碼

關(guān)于 CSS，我們指定容器的position和overflow屬性，從ul和li元素中刪除任何樣式，將列表項(xiàng)設(shè)置為不可見（標(biāo)記為active的除外），最后指定span元素的一些屬性，這些屬性將充當(dāng)百葉窗（稍后我會談到）。

.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 代碼

本實(shí)例用了jQuery編程，因此不要忘了在開頭引用jQuery庫文件，如：

<script type="text/javascript" src="jquery-3.2.1.min.js"></script>

下面是實(shí)現(xiàn)代碼。

注意：除了兩個(gè)函數(shù)之外的所有內(nèi)容都將包含在一個(gè)$(document).ready()函數(shù)中。

首先，我們需要指定幾個(gè)選項(xiàng)：

var width = 960;
height = 538;
var numberOfBlinds = 20;
var margin = 2;
var color = '#000';
gapHeight = 100;

width和height參考圖像的尺寸；numberOfBlinds百葉窗葉片數(shù)量；margin設(shè)置百葉窗之間的距離；color設(shè)置百葉窗的顏色；gapHeight設(shè)置間隙的總高度（用于創(chuàng)建不均勻的百葉窗效果）。

往后，我們設(shè)置container的width和height為剛才我們聲明的值，以及計(jì)算每個(gè)葉片的寬度。

var container = $('#container');
container.width(width).height(height);
var blindWidth = width / numberOfBlinds;

接下來，我們開始處理圖像。我們遍歷圖像列表，將它們作為 jQuery 對象存儲在images數(shù)組中。然后，我們將列表的第一個(gè)圖像設(shè)置為active，并初始化一個(gè)值以跟蹤哪個(gè)圖像是活動(dòng)的。

images = new Array();
$('ul li', container).each(function() {
    images.push($(this)); 
});
 
images[0].addClass('active');
activeImage = 0;

在存儲到$(document).ready()函數(shù)中的代碼的最后一部分中，我們創(chuàng)建了百葉窗。

在for循環(huán)內(nèi)，我們使用calculateBorders函數(shù)為每個(gè)span元素（即百葉窗葉片）的邊界計(jì)算不同的值，并相應(yīng)地設(shè)置它們的 CSS 值。

每個(gè)span生成后，它都被添加到容器中。最后，我們將span元素的選擇器存儲在一個(gè)變量中，并指示瀏覽器在一秒鐘（即 1000 毫秒）后執(zhí)行animateBorders函數(shù)。

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函數(shù)會隨機(jī)選擇1 到 9 之間的一個(gè)值，然后將其用作百分比，根據(jù)我們之前指定的變量gapHeight計(jì)算每個(gè)百葉窗上下邊框的高度，并將這些值作為對象返回。

舉個(gè)例子，假設(shè)隨機(jī)變量是3。因此，根據(jù)gapHeight設(shè)置為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};
}

我們的最后一個(gè)函數(shù)被稱為animateBorders，它負(fù)責(zé)實(shí)際動(dòng)畫邊界，并執(zhí)行圖像之間的過渡。因此，我們指示所有百葉窗將其邊框設(shè)置為容器的整個(gè)高度，從而隱藏圖像。在animate函數(shù)的回調(diào)中，我們再次計(jì)算邊界（因此它們可以隨機(jī)改變），經(jīng)過一小段延遲后，我們再次將它們設(shè)置為新值的動(dòng)畫。

最后但并非最不重要的是，有一小部分代碼只執(zhí)行一次。在那里，我們從當(dāng)前可見的圖像中刪除active類，迭代activeImage變量，添加active類到列表的下一個(gè)圖像，最后，指示瀏覽器再次運(yùn)行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);
    });
}

至此，本實(shí)例主要代碼就介紹完畢了，喜歡的朋友可以直接下載本實(shí)例源碼使用。

您可能對以下文章也感興趣

• 如何將 Bootstrap 4 Carousel 更改為淡入淡出過渡而不是滑動(dòng)
• 【實(shí)例】淡入淡出幻燈片/自動(dòng)輪播動(dòng)畫效果
• 純CSS實(shí)現(xiàn)的左右滑動(dòng)幻燈片
• 純CSS實(shí)現(xiàn)的幻燈片/輪播效果【高級動(dòng)畫】
• 【實(shí)例】使用 HTML、CSS 和 JavaScript 創(chuàng)建幻燈片

標(biāo)簽: 輪播  幻燈片