jquery的图片轮播.docxVIP

用JQuery操作DOM确实很方便，并且JQuery提供了非常人性化的API应付我们的各种需求，其中选择器在此示例-“JQuery实现图片轮播效果”上体现的尤为出色。大大简化了js的代码。【原理简述】这里大概说一下整个流程：1，将除了第一张以外的图片全部隐藏，2，获取第一张图片的alt信息显示在信息栏，并添加点击事件3，为4个按钮添加点击侦听，点击相应的按钮，用fadeOut，fadeIn方法显示图片4，设置setInterval，定时执行切换函数【代码说明】filter(:visible) :获取所有可见的元素unbind()：从匹配的元素中删除绑定的事件siblings：取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合例：找到每个div的所有同辈元素中带有类名为selected的元素。pHello/pdivspanHello Again/span/divpAnd Again/p执行 $(div).siblings()，结果[ pHello/p, pAnd Again/p ] 【程序源码】HTML部分：bodydiv id=bannerdiv id=banner_bg/div!--标题背景--div id=banner_info/div!--标题--ulli class=on1/lili2/lili3/lili4/li/uldiv id=banner_lista href=# target=_blankimgsrc=imgs/p1.jpg title=橡树小屋的blog alt=橡树小屋的blog//aa href=# target=_blankimgsrc=imgs/p5.jpg title=橡树小屋的blog alt=橡树小屋的blog//aa href=# target=_blankimgsrc=imgs/p3.jpg title=橡树小屋的blog alt=橡树小屋的blog//aa href=# target=_blankimgsrc=imgs/p4.jpg title=橡树小屋的blog alt=橡树小屋的blog//a/div/div/bodyCSS部分：style type=text/css#banner {position:relative; width:478px; height:286px; border:1px solid #666;overflow:hidden;}#banner_listimg{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 ulli.on{ background:#900}#banner_list a{position:absolute;} !-- 让四张图片都可以重叠在一起--/styleJS部分:script type=text/javascriptvar t = n = 0, count; $(document).ready(function(){ count=$(#banner_list a).length; $(#banner_list a:not(:first-child)).hide(); $(#banner_info).html($(#ba