..


赞助商链接

一个用jQuery淡入淡出画廊

书面文章卢卡鲁杰罗
第1 2

jQuery 的感谢是有可能实现一个非常有吸引力的非常简单的图片画廊 ，在这个简单的教程中，我们将看到如何创建，而不是使用淡入淡出效果一个简单的褪色画廊或画廊里的图像序列中出现（彼此相邻）宜人。

为了实现我们的画廊不要使用任何插件，但我们会限制自己的工具，它提供的jQuery明智地利用。

我们看到一个什么样的，我们打算预览：

fadegallery的jQuery
我们注意到，第三次是在屏幕图像捕获了当时的即将流行的脚本为个人图像使用此效果fadeIn出现第二个远离彼此通话。

我们分析的HTML代码： 






 <HTML>



  



 <HEAD>



    



一个用jQuery幻灯片<TITLE>画廊</ TITLE>



    



 <link rel="stylesheet" type="text/css" href="style.css">



    



 <script type="text/javascript" src="jquery.js"> </ SCRIPT>



    



 <script type="text/javascript" src="fadegallery.js"> </ SCRIPT>



  



 </ HEAD>







 <BODY>









 <div id="fadegallery"> </ DIV>









 </ BODY>







 </ HTML>
我们在页面这是我们分配一个DIV的ID fadegallery身体，我们所说的头和外部样式表，jQuery库和文件fadegallery.js其中的代码如下： 





功能显示（X）{$（“＃IMG”+ X）fadeIn（“慢”）;}







 $（文件）。就绪







 （



  



函数（）



  



 {



    



 $（“＃Fadegallery”）后（“

 
 



 “）;



    



 VAR IMG =新的Array（）;



    



 / / ***** ***** ***** ***** ***** ***** ***** ***** ***** *** **



    



 IMG [0] =“pippo.jpg”;



    



 IMG [1] =“pluto.jpg”;



    



 IMG [2] =“paperino.jpg”;



    



 / / ***** ***** ***** ***** ***** ***** ***** ***** ***** *** **



    



 VAR I = 0;



    



为（i = 0;我<img.length，我+ +）



    



 {



      



 $（“＃Fadegallery”）。追加（“+ I + <div id='img" "'class='boxfoto'> <img src='" + + img[i] "'> </ DIV>”） ;



      



的window.setTimeout（“显示（”+我+“）”，（（I + 1）* 1000））;



    



 }



  



 }







 ）;

它的操作很简单：首先我们创建一个参数化的函数调用的查看jQuery的fadeIn函数（褪色）各DIV，我们建立在动态中提取周期中，这反过来阵列中的所有项目，包含在HTML图像和页面布局。

在循环中，还记得，从第二个计时器和运行几秒钟每一步，从而进一步增加的功能显示（），准确地说，创建效果序列。

注意声明： 

 



 $（“＃Fadegallery”）后（“

 
 



 “）;
插入函数（）的开头：这是为了滚动DIV容纳下我们的画廊中的任何内容（在重叠要素的情况下可能导致因为在CSS的float属性，我们使用这个不愉快的）。

在同一类...
电子学习
CSS（课程） CSS（课程）
网页设计和辅助功能根据W3C CSS和XHTML。 起价29€。
HTML（课程） HTML（课程）
为从29€Web标记语言。
使用Javascript（课程） 使用Javascript（课程）
完成引导客户端脚本。 从39€。
赞助商链接