HTML5学堂-码匠 HTML5学堂

您当前位于:jQuery 实战开发 ——> jQuery特效实战开发 - 实例:图片渐变

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

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

JQ特效—图片渐变

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

效果需求

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

效果展示

HTML5学堂 图片渐变效果

效果实现

结构代码

  1. <body>
  2. <div class="con">
  3.     <img src="http://www.h5course.com/demo.png" alt="HTML5学堂" title="HTML5学堂">
  4.     <img src="http://www.h5course.com/demo.png" alt="HTML5学堂" title="HTML5学堂">
  5.     <img src="http://www.h5course.com/demo.png" alt="HTML5学堂" title="HTML5学堂">
  6. </div>
  7. </body>

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

欢迎沟通交流~HTML5学堂

样式代码

  1. <style>
  2. .con {
  3.     position: relative;
  4.     height: 400px;
  5. }
  6. .con img {
  7.     position: absolute;
  8.     top: 0;
  9.     left: 0;
  10.     width: 100%;
  11.     height: 100%;
  12. }
  13. </style>

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

行为代码

  1. <script>
  2. var imgIndex = 0;
  3. setInterval(fade, 3000);
  4. function fade () {
  5.     $('.con img').eq(imgIndex).fadeIn(1000).siblings().fadeOut(1000);
  6.     imgIndex++;
  7.     if (imgIndex == $('.con img').length) {
  8.         imgIndex = 0;
  9.     };
  10. }
  11.     </script>

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

注意事项

图片须全部定位在同一个位置。

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端