jQuery特效实战开发 - 实例：图片渐变

2015/06/09 23:56:02 | 作者：HTML5学堂（码匠） | 分类：jQuery实战开发 | 关键词：JQ特效,图片渐变,动画,JQ,jQuery

JQ特效—图片渐变

HTML5学堂：图片渐变效果是一个网站开发中经常接触的一个效果，该效果相对于传统的图集显示方式显得更加新颖、有创新。该效果不采用左右滚动的图片切换方式，选用的是图片淡入淡出加上自动更换的方式进行图片的切换。希望对大家的工作有所帮助~

效果需求

在网站中，我们经常会看到图片渐变的效果（广告区域、图集模块）。图片渐变的效果跟大图滚动的功能相似、均在指定的区域内，显示一个图集信息，但该效果的功能需求上是采用多张图片叠在一起，每隔几秒钟，当前图片淡出，下一个图片淡入，形成缓和的图片切换。

效果展示

效果实现

结构代码

<body>
<div class="con">
<img src="http://www.h5course.com/demo.png" alt="HTML5学堂" title="HTML5学堂">
<img src="http://www.h5course.com/demo.png" alt="HTML5学堂" title="HTML5学堂">
<img src="http://www.h5course.com/demo.png" alt="HTML5学堂" title="HTML5学堂">
</div>
</body>

以上代码为大图渐变效果的HTML结构，使用一个类名为con的div标签包裹要实现渐变的3张img图片。

欢迎沟通交流~HTML5学堂

样式代码

<style>
.con {
position: relative;
height: 400px;
}
.con img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>

以上代码为大图渐变效果的CSS样式代码，类名为con的元素采用的是相对定位的方式，子集img采用的是绝对定位的方式。img标签根据父级的相对定位，将3个img都定位在同一个位置，方便js效果的实现。

行为代码

<script>
var imgIndex = 0;
setInterval(fade, 3000);
function fade () {
$('.con img').eq(imgIndex).fadeIn(1000).siblings().fadeOut(1000);
imgIndex++;
if (imgIndex == $('.con img').length) {
imgIndex = 0;
};
}
</script>

以上代码为大图渐变效果的jQuery行为代码，首先定义了一个变量imgIndex表示图片的索引值，初始值为0——第一张图片。计时器setInterval每隔3秒就调用fade函数。fade函数内使用后代选择器选用类名为con的后代标签img，并使用.eq()来指定要执行动画的img索引值，该图片以1s的时间淡入的方式显示出来，其他的.sublings()兄弟级元素以1s的时间淡出。在动画执行的同时，imgIndex的值增加1。为了下一轮动画能持续下去，当表示索引值的变量达到图片的个数时，把表示索引值的变量imgIndex重新赋值为0。