`

JQuery实现图片轮播效果 【实例演示】

阅读更多

转帖地址:http://www.cnblogs.com/babyzone2004/archive/2010/08/30/1812682.html

 

用JQuery操作DOM确实很方便,并且JQuery提供了非常人性化的API应付我们的各种需求,其中选择器在此示例-“JQuery实现图片轮播效果”上体现的尤为出色。大大简化了js的代码。

【原理简述】

这里大概说一下整个流程:

1,将除了第一张以外的图片全部隐藏,

2,获取第一张图片的alt信息显示在信息栏,并添加点击事件

3,为4个按钮添加点击侦听,点击相应的按钮,用fadeOut,fadeIn方法显示图片

4,设置setInterval,定时执行切换函数

【代码说明】

filter( " :visible " ) :获取所有可见的元素

unbind():从匹配的元素中删除绑定的事件

siblings:取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

例:找到每个div的所有同辈元素中带有类名为selected的元素。

< p > Hello </ p >< div >< span > Hello Again </ span ></ div >< p > And Again </ p >

执行 $("div").siblings(),结果

[ < p > Hello </ p > , < p > And Again </ p > ]

【程序源码】

HTML部分:

< body > < div id ="banner" > < div id ="banner_bg" ></ div > <!-- 标题背景 --> < div id ="banner_info" ></ div > <!-- 标题 --> < ul > < li class ="on" > 1 </ li > < li > 2 </ li > < li > 3 </ li > < li > 4 </ li > </ ul > < div id ="banner_list" > < a href ="#" target ="_blank" >< img src ="imgs/p1.jpg" title ="橡树小屋的blog" alt ="橡树小屋的blog" /></ a > < a href ="#" target ="_blank" >< img src ="imgs/p5.jpg" title ="橡树小屋的blog" alt ="橡树小屋的blog" /></ a > < a href ="#" target ="_blank" >< img src ="imgs/p3.jpg" title ="橡树小屋的blog" alt ="橡树小屋的blog" /></ a > < a href ="#" target ="_blank" >< img src ="imgs/p4.jpg" title ="橡树小屋的blog" alt ="橡树小屋的blog" /></ a > </ div > </ div > </ body >

CSS部分:

<style type="text/css"> #banner { position : relative ; width : 478px ; height : 286px ; border : 1px solid #666 ; overflow : hidden ; } #banner_list img { border : 0px ; } #banner_bg { position : absolute ; bottom : 0 ; background-color : #000 ; height : 30px ; filter : Alpha(Opacity=30) ; opacity : 0.3 ; z-index : 1000 ; cursor : pointer ; width : 478px ; } #banner_info { position : absolute ; bottom : 0 ; left : 5px ; height : 22px ; color : #fff ; z-index : 1001 ; cursor : pointer } #banner_text { position : absolute ; width : 120px ; z-index : 1002 ; right : 3px ; bottom : 3px ; } #banner ul { position : absolute ; list-style-type : none ; filter : Alpha(Opacity=80) ; opacity : 0.8 ; border : 1px solid #fff ; z-index : 1002 ; margin : 0 ; padding : 0 ; bottom : 3px ; right : 5px ; } #banner ul li { padding : 0px 8px ; float : left ; display : block ; color : #FFF ; border : #e5eaff 1px solid ; background : #6f4f67 ; cursor : pointer } #banner ul li.on { background : #900 } #banner_list a { position : absolute ; } <!-- 让四张图片都可以重叠在一起--> </style>

JS部分:

< script type = " text/javascript " > var t = n = 0 , count; $(document).ready( function (){ count = $( " #banner_list a " ).length; $( " #banner_list a:not(:first-child) " ).hide(); $( " #banner_info " ).html($( " #banner_list a:first-child " ).find( " img " ).attr( ' alt ' )); $( " #banner_info " ).click( function (){window.open($( " #banner_list a:first-child " ).attr( ' href ' ), " _blank " )}); $( " #banner li " ).click( function () { var i = $( this ).text() - 1 ; // 获取Li元素内的值,即1,2,3,4 n = i; if (i >= count) return ; $( " #banner_info " ).html($( " #banner_list a " ).eq(i).find( " img " ).attr( ' alt ' )); $( " #banner_info " ).unbind().click( function (){window.open($( " #banner_list a " ).eq(i).attr( ' href ' ), " _blank " )}) $( " #banner_list a " ).filter( " :visible " ).fadeOut( 500 ).parent().children().eq(i).fadeIn( 1000 ); document.getElementById( " banner " ).style.background = "" ; $( this ).toggleClass( " on " ); $( this ).siblings().removeAttr( " class " ); }); t = setInterval( " showAuto() " , 4000 ); $( " #banner " ).hover( function (){clearInterval(t)}, function (){t = setInterval( " showAuto() " , 4000 );}); }) function showAuto() { n = n >= (count - 1 ) ? 0 : ++ n; $( " #banner li " ).eq(n).trigger( ' click ' ); } < / script>
分享到:
评论

相关推荐

    jQuery实现超炫效果的实例源码

    接着,“jquery图片效果”可能指的是通过jQuery实现的图片切换效果,如图片轮播、图片放大镜等。这些效果能有效吸引访问者注意力,增强视觉冲击力。如图片轮播图可以用来展示商品特写、活动资讯等,而放大镜效果则能...

    非常漂亮的100个 jquery前端案例,包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等.zip

    jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 jquery实现图片可拖动展示的实例下载 jQuery实现拖动滚动条的缩略图排列插件下载 jQuery实现焦点图片Flash自动平滑渐变效果 jQuery实现鼠标移到链接提示...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    103. 推荐jQuery仿新浪QQ绝好图片轮播效果带左右控制插件 104. 推荐jQuery兼容所有浏览器的自定义多样式图片幻灯片插件(KinSlideshow)下载 105. 推荐jquery动画制作示例图片滚动和飞行乌鸦,车窗效果,非常强大 ...

    100多个JQuery效果示例(实例)div+css+javascrpit

    103. 推荐jQuery仿新浪QQ绝好图片轮播效果带左右控制插件 104. 推荐jQuery兼容所有浏览器的自定义多样式图片幻灯片插件(KinSlideshow)下载 105. 推荐jquery动画制作示例图片滚动和飞行乌鸦,车窗效果,非常强大 106...

    jquery实现的图片展示特效

    本资源"jquery实现的图片展示特效"是利用jQuery来创建吸引人的图片展示效果的实例,适合前端开发者学习和借鉴。 jQuery 的图片展示特效通常涉及到以下几个关键技术点: 1. **动态加载**:jQuery 可以帮助我们根据...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    29. jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30. jquery实现图片可拖动展示的实例下载 31. jQuery实现拖动滚动条的缩略图排列插件下载 32. jQuery实现焦点图片Flash自动平滑渐变效果 33. ...

    仿网页图片轮播效果2010.zip

    在“仿网页图片轮播效果2010.pptx”文件中,可能会详细介绍这些概念,并通过实例展示如何创建一个2010年风格的图片轮播,包括使用的代码示例、设计原则以及当时的流行趋势。这个PPT文件对于学习和理解早期网页设计的...

    jQuery响应式Banner图片轮播代码.zip

    本资源"jQuery响应式Banner图片轮播代码.zip"包含了实现这一功能的代码实例。 首先,jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。jQuery的API易学易用,使得...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    29.jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30.jquery实现图片可拖动展示的实例下载 31.jQuery实现拖动滚动条的缩略图排列插件下载 32.jQuery实现焦点图片Flash自动平滑渐变效果 33....

    关于用jQuery实现效果

    至于"第八章节例子",可能是指博客中包含的一个实践示例,可能是对前面讲解的知识点进行的实例演示,帮助读者更好地理解和应用jQuery。 总结来说,这篇博客“关于用jQuery实现效果”可能涉及了jQuery的选择器、事件...

    jquery 动态示例

    29. jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30. jquery实现图片可拖动展示的实例下载 31. jQuery实现拖动滚动条的缩略图排列插件下载 32. jQuery实现焦点图片Flash自动平滑渐变效果 33. ...

    jQuery轮播图插件jCarousel

    总结,jCarousel作为一款强大的jQuery轮播图插件,不仅提供了丰富的预设效果,还允许开发者通过自定义选项和API实现更多个性化功能。无论是新手还是经验丰富的前端开发人员,都能从中受益,轻松创建出令人满意的轮播...

    jquery.slicebox酷炫的html5 3d图片轮播幻灯片切换效果

    jQuery Slicebox是一款基于jQuery的插件,通过将图片切割成多个切片,并对其进行3D旋转和变换,实现了一种立体感强烈的图片轮播效果。这种效果不仅可以增加视觉冲击力,还能让用户的浏览过程更加有趣。 二、主要...

    自动调整大小的jquery图片展示特效

    【标题】"自动调整大小的jquery图片展示特效"涉及到的核心技术是使用JavaScript库jQuery来实现网页上图片的动态适应和展示。jQuery是一个轻量级、功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计...

    图片轮放例子,图片新闻,图片幻灯片 jquery 实现

    压缩包中的文件名称列表包括一系列数字加扩展名的图片文件(如5.gif、6.jpg等),这些很可能是用于演示图片轮放效果的实际图片素材。而“imgTest”可能是一个HTML文件,里面包含了使用jQuery实现的图片轮放代码,...

    带文字说明的jQuery幻灯片自动轮播代码.zip

    为了实现轮播效果,可能需要设置`position: relative`和`overflow: hidden`属性,隐藏超出容器的部分。 3. **jQuery脚本**:主要负责实现轮播的动态效果。这包括自动切换、手动导航、过渡动画等。在本代码中,将...

    jquery零碎实例和学习心得

    `js-0127-jQuery流行广告效果.rar` 可能包含了一些使用jQuery实现的动态广告效果实例,这对于学习如何利用jQuery创建吸引人的网页元素很有帮助。 `jquery手册.rar` 又一份jQuery的手册,可能包含不同的讲解角度或...

    基于jquery的图片切换插件

    **基于jQuery的图片切换插件**是Web开发中常见的功能,用于实现动态、平滑的图像展示效果。jQuery作为一个强大的JavaScript库,简化了DOM操作、事件处理和动画制作,因此用它来创建图片切换插件既高效又简单。在本...

    仿淘宝首页jquery轮播焦点图

    【标题】"仿淘宝首页jquery轮播焦点图"是一个基于jQuery技术实现的网页动态效果,旨在模拟淘宝网站首页面的焦点图轮播功能。这种功能通常用于展示网站的重要内容或商品,通过自动切换图片和相应的文字说明,吸引用户...

    《锋利的jQuery第二版》实例源码.rar

    6. 实战项目:除了基础功能的演示,书中很可能还包括了实际项目中的应用场景,如响应式布局、表单验证、轮播图、模态框等,这些实例可以帮助读者将所学知识应用到实际工作中。 由于压缩包文件名只给出了"《锋利的...

Global site tag (gtag.js) - Google Analytics