百叶窗过渡的幻灯片/轮播动画【效果演示/源码下载】
作者: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);
});
}至此，本实例主要代码就介绍完毕了，喜欢的朋友可以直接下载本实例源码使用。
您可能对以下文章也感兴趣
- 站长推荐
