技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

百叶窗过渡的幻灯片/轮播动画【效果演示/源码下载】

作者:admin    时间:2021-9-28 10:5:1    浏览:

幻灯片/轮播动画有各种各样的效果,本文介绍一个百叶窗过渡的效果,喜欢的朋友可以直接下载源码使用。

百叶窗过渡的幻灯片/轮播动画效果是这样的,一次只能看到其中一个图像,我们的 JavaScript 代码将添加许多span用作垂直百叶窗的元素,并将绝对定位在可见图像的上方,因此它们可以隐藏它。几秒钟后,百叶窗将关闭,图像将改变。它们将再次打开,无限循环。

 百叶窗过渡的幻灯片/轮播动画效果

demodownload

实例介绍

本实例是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,我们指定容器的positionoverflow属性,从ulli元素中删除任何样式,将列表项设置为不可见(标记为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;

widthheight参考图像的尺寸;numberOfBlinds百叶窗叶片数量;margin设置百叶窗之间的距离;color设置百叶窗的颜色;gapHeight设置间隙的总高度(用于创建不均匀的百叶窗效果)。

往后,我们设置containerwidthheight为刚才我们声明的值,以及计算每个叶片的宽度。

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);
    });
}

至此,本实例主要代码就介绍完毕了,喜欢的朋友可以直接下载本实例源码使用。

您可能对以下文章也感兴趣

标签: 轮播  幻灯片  
  • IT热文
  • 站长推荐