`
netatomy
  • 浏览: 46860 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

jQuery学习:简单的渐入渐出图片切换

 
阅读更多

jQuery提供了渐入渐出的方法:.fadeIn()和.fadeOut(),利用这两个方法和其他方法,可以实现简单的渐入渐出图片切换动画。

首先设计好要切换的图片,通常是做成UL:

   1: <div id="slider">
<!--CRLF-->
   2:   <ul>
<!--CRLF-->
   3:     <li><img src="1.jpg" />li>
<!--CRLF-->
   4:     <li><img src="2.jpg" />li>
<!--CRLF-->
   5:     <li><img src="3.jpg" />li>
<!--CRLF-->
   6:     <li><img src="4.jpg" />li>
<!--CRLF-->
   7:   ul>
<!--CRLF-->
   8: div>
<!--CRLF-->

然后简单地设置一下样式:

   1: #slider {
<!--CRLF-->
   2:   width: 400px;
<!--CRLF-->
   3:   height: 300px;
<!--CRLF-->
   4:   position: relative;
<!--CRLF-->
   5: }
<!--CRLF-->
   6: 
<!--CRLF-->
   7: #slider ul { list-style-type: none; }
<!--CRLF-->
   8: 
<!--CRLF-->
   9: #slider ul li { 
<!--CRLF-->
  10:   position: absolute;
<!--CRLF-->
  11:   left: 0;
<!--CRLF-->
  12:   top: 0;
<!--CRLF-->
  13: }
<!--CRLF-->

通过样式表基本上就可以猜到实现的原理就是这些图片通过绝对定位叠在一起,然后通过.fadeOut()和.fadeIn()依次显示这些图片。

下面开始编写脚本,首先做准备工作:

   1: var option = {
<!--CRLF-->
   2:     speed: 1000,  // 渐变时间
<!--CRLF-->
   3:     timeout: 3000 // 停留时间
<!--CRLF-->
   4: };
<!--CRLF-->

然后将所有的LI隐藏,只显示第一个:

   1: var $li = $("#slider ul li");
<!--CRLF-->
   2: $li.hide();
<!--CRLF-->
   3: $($li[0]).show();
<!--CRLF-->

然后设置定时器,调用showNext函数:

   1: setTimeout(function(){ showNext(1, 0); }, o.timeout);
<!--CRLF-->

最后定义showNext函数:

   1: function showNext(n, c){ 
<!--CRLF-->
   2:     $($li[c]).fadeOut(o.speed);
<!--CRLF-->
   3:     $($li[n]).fadeIn(o.speed);
<!--CRLF-->
   4:     c = n;
<!--CRLF-->
   5:     n = (n >= $li.length - 1) ? 0 : n+1;
<!--CRLF-->
   6:     
<!--CRLF-->
   7:     setTimeout(function(){ showNext(n, c); }, o.timeout);
<!--CRLF-->
   8:   }
<!--CRLF-->

这样就做好了,效果还不错吧,完整的脚本代码如下:

   1: $(document).ready(function(){
<!--CRLF-->
   2:   
<!--CRLF-->
   3:   var o = { speed: 1000, timeout: 2000 };
<!--CRLF-->
   4:   var $li = $("#slider ul li");
<!--CRLF-->
   5:   $li.hide();
<!--CRLF-->
   6:   $($li[0]).show();
<!--CRLF-->
   7: 
<!--CRLF-->
   8:   setTimeout(function(){ showNext(1, 0); }, o.timeout);
<!--CRLF-->
   9: 
<!--CRLF-->
  10:   function showNext(n, c){ 
<!--CRLF-->
  11:     $($li[c]).fadeOut(o.speed);
<!--CRLF-->
  12:     $($li[n]).fadeIn(o.speed);
<!--CRLF-->
  13:     c = n;
<!--CRLF-->
  14:     n = (n >= $li.length - 1) ? 0 : n+1;
<!--CRLF-->
  15:     
<!--CRLF-->
  16:     setTimeout(function(){ showNext(n, c); }, o.timeout);
<!--CRLF-->
  17:   }
<!--CRLF-->
  18: });
<!--CRLF-->
分享到:
评论

相关推荐

    jQuery: Novice to Ninja

    ### jQuery: 从新手到高手 #### 出版信息与背景 - **出版商**:SitePoint ...通过循序渐进的学习过程,读者不仅能够掌握jQuery的基础用法,还能深入了解如何利用这一强大的工具库来创建功能丰富的网页应用。

    jquery旅游网站带标题的焦点图片切换代码

    "jQuery旅游网站带标题的焦点图片切换代码"就是一个实现这种效果的技术方案,旨在为用户提供一种动态且引人入胜的浏览体验。jQuery作为一个轻量级、高性能的JavaScript库,提供了丰富的API和插件,使得实现这种功能...

    基于jQuery的网页特效大全,包括图片切换,渐隐特效,淘宝首页的滑动图片等。

    1. 图片切换:在`image_slider_ad.html`和`image_slider.html`中,你可以找到实现图片轮播的代码。这些效果通常用于网站广告或展示产品图片。jQuery的`.slideUp()`和`.slideDown()`方法用于控制图片的显示和隐藏,`....

    简单的jquery层叠图片滚动轮播切换效果代码,带按钮的滚动轮播图

    总之,这个项目提供了一个基本的jQuery图片轮播解决方案,结合HTML和CSS,能够实现带按钮的图片切换效果。对于初学者来说,这是一个很好的实践项目,可以学习到如何使用jQuery操作DOM,处理事件,以及实现动态效果。...

    jQuery实现的渐隐渐显焦点图切换特效源码.zip

    【jQuery实现的渐隐渐显焦点图切换特效源码】是一种常见的网页动态效果,它利用JavaScript库jQuery的强大功能,为网站的图片展示区域提供一种吸引用户的交互方式。这种特效允许图片在用户眼前平滑地淡入淡出,创造出...

    基于JQuery横向切换效果

    【基于JQuery的Banner大图片横向切换效果】是一种常见的网页设计技术,用于在网页的头部展示一组可滑动的大图,提升网站的视觉吸引力和用户体验。这种效果通常应用于产品展示、新闻更新或广告轮播等场景。JQuery,...

    JQuery图片切换

    3. **动画(Animation)**:jQuery的`.fadeIn()`, `.fadeOut()`, 或 `.slideToggle()`等方法可以实现元素的渐显、渐隐或滑动效果,常用于图片切换的过渡动画。 4. **定时器(Timers)**:`setInterval()`和`...

    JQUERY实现的图片展示效果

    首先,jQuery的灵活性使得图片切换变得简单。通过选择器选取元素,然后应用相应的动画效果,可以轻松地创建出吸引人的图片展示。描述中的"4种显示图片的效果"可能包括:幻灯片轮播、淡入淡出、滑动切换和网格布局等...

    简单的jquery层叠图片滚动轮播切换效果代码.rar

    7. **轮播逻辑**:轮播效果通常包括初始化状态、图片切换的条件判断(如防止越界)、动画执行的时机控制等。这涉及到数组索引操作和条件语句的使用。 8. **可扩展性和自定义**:一个良好的轮播插件设计应允许用户...

    jQuery制作鼠标悬浮图片上下滚动切换展示效果

    "jQuery制作鼠标悬浮图片上下滚动切换展示效果"是一个常见的交互式设计实践,它利用jQuery库来实现当鼠标悬停在图片上时,图片自动进行上下滚动切换,从而呈现出丰富的视觉体验。这种效果常见于产品展示、新闻滚动...

    jQuery选项卡标签控制图片切换代码

    本教程将详细讲解如何使用jQuery实现选项卡标签控制图片切换的功能,这对于初学者来说是一个很好的实践项目。 首先,`index.html`是网页的主文件,它包含了HTML结构。在这个示例中,HTML应包含选项卡的结构以及要...

    jQuery图片展示滑动切换特效

    - **切换效果**:使用`.fadeIn()`和`.fadeOut()`方法实现图片的渐显和渐隐效果,或者使用`.slideToggle()`实现滑动切换。通过计时器控制切换间隔,例如`setInterval(function(){...}, 3000)`每3秒切换一次。 - **...

    简洁版jquery左右切换焦点图幻灯代码.zip

    该代码的核心在于利用jQuery的`.animate()`方法来创建平滑的过渡效果,以及`.fadeIn()`和`.fadeOut()`方法来实现图片的渐入渐出。通过设置定时器,我们可以让图片按照设定的时间间隔自动切换。同时,左右箭头的点击...

    jquery图片显示

    2. 渐显渐隐效果:jQuery的.fadeIn()和.fadeOut()方法可实现图片的淡入淡出效果,常用于创建更平滑的过渡效果。例如: ```javascript $("#myImg").fadeIn(1000); // 图片在1秒内渐显 $("#myImg").fadeOut(500); // ...

    jquery image slider

    jQuery提供了丰富的动画效果,如`.fadeIn()`, `.fadeOut()`, `.slideToggle()`等,这些在Image Slider中非常关键,可以实现平滑的图片切换。例如,通过`.fadeIn()`可以让下一张图片渐入,而`.fadeOut()`则让当前图片...

    基于jQuery实现淡入淡出的带文字标题图片切换焦点图特效源码.zip

    该资源是一个基于jQuery库开发的前端图片切换效果,主要用于实现图片与文字标题的淡入淡出切换,为网站增加动态视觉效果。这个特效通常应用于网页的焦点图展示区域,能够吸引用户注意力,提升用户体验。 首先,...

    jQuery实现的四款支持不同自定义图片切换的焦点图插件特效源码L_slide.js.zip

    《jQuery实现的四款焦点图插件特效源码解析与应用》 在Web开发中,图片切换效果常常被用于网站的首页或者...在实际应用中,我们可以根据项目需求,对这些源码进行二次开发和优化,创造出更具个性化的图片切换效果。

    jQuery手风琴五屏图片轮播切换代码.zip

    《jQuery手风琴五屏图片轮播切换代码详解》 在网页设计中,动态效果的运用可以提升用户体验,其中jQuery库因其简洁易用的API,成为开发者常用的工具。本篇文章将详细解析标题为"jQuery手风琴五屏图片轮播切换代码....

    jquery实现手风琴图片展示效果

    总的来说,这个项目提供了学习和实践jQuery交互效果的良好机会,同时也展示了如何将简单的HTML和CSS与JavaScript库结合,创建出吸引用户的动态网页元素。通过理解并实现这个手风琴图片展示效果,开发者不仅可以提升...

    tab标签图片渐隐渐现效果

    总结一下,实现"tab标签图片渐隐渐现效果"的关键在于理解HTML的结构布局,利用CSS的transition属性创建动画效果,以及使用JavaScript或jQuery来控制tab的切换和图片的动态显示。这样的设计不仅增强了用户体验,也使...

Global site tag (gtag.js) - Google Analytics