1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>JQuery实现图片轮播效果 </title>
  6. <script src="http://img.jb51.net/jslib/jquery/jquery14.js" type="text/javascript"></script>
  7. <style type="text/css"><!--
  8. #banner {position:relative; width:478px; height:286px; border:1px solid #666; overflow:hidden; font-size:16px}
  9. #banner_list img {border:0px;}
  10. #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; }
  11. #banner_info{position:absolute; bottom:4px; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}
  12. #banner_text {position:absolute;width:120px;z-index:1002; right:3px; bottom:3px;}
  13. #banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; z-index:1002;
  14. margin:0; padding:0; bottom:3px; right:5px; height:20px}
  15. #banner ul li { padding:0 8px; line-height:18px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background-color:#6f4f67;cursor:pointer; margin:0; font-size:16px;}
  16. #banner_list a{position:absolute;} <! 让四张图片都可以重叠在一起
  17. --></style>
  18. </head> 
  19.  
  20. <body> 
  21.  
  22. <p>【实例演示】</p>
  23. <div id="banner">
  24. <div id="banner_bg"></div>
  25. <!--标题背景-->
  26. <div id="banner_info"></div>
  27. <!--标题--> 
  28.  
  29. <ul>
  30. <li>1</li>
  31. <li>2</li>
  32. <li>3</li>
  33. <li>4</li>
  34. </ul>
  35. <div id="banner_list">
  36. <a href="#" target="_blank"><img src="http://files.jb51.net/demoimg/201008/o_p1.jpg" title="橡树小屋的blog" alt="橡树小屋的blog" /></a>
  37. <a href="#" target="_blank"><img src="http://files.jb51.net/demoimg/201008/o_p3.jpg" title="橡树小屋的blog" alt="橡树小屋的blog" /></a>
  38. <a href="#" target="_blank"><img src="http://files.jb51.net/demoimg/201008/o_p4.jpg" title="橡树小屋的blog" alt="橡树小屋的blog" /></a>
  39. <a href="#" target="_blank"><img src="http://files.jb51.net/demoimg/201008/o_p5.jpg" title="橡树小屋的blog" alt="橡树小屋的blog" /></a>
  40. </div>
  41. </div>
  42. <script type="text/javascript">// <![CDATA[
  43. var t = n = 0, count;
  44. $(document).ready(function(){
  45. count=$("#banner_list a").length;
  46. $("#banner_list a:not(:first-child)").hide();
  47. $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
  48. $("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});
  49. $("#banner li").click(function() {
  50. var i = $(this).text() - 1;//获取Li元素内的值，即1，2，3，4
  51. n = i;
  52. if (i >= count) return;
  53. $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
  54. $("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})
  55. $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
  56. $(this).css({"background":"#be2424",'color':'#000'}).siblings().css({"background":"#6f4f67",'color':'#fff'});
  57. });
  58. t = setInterval("showAuto()", 4000);
  59. $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
  60. }) 
  61.  
  62. function showAuto()
  63. {
  64. n = n >=(count - 1) ? 0 : ++n;
  65. $("#banner li").eq(n).trigger('click');
  66. }
  67. // ]]></script>
  68. </body>
  69. </html> 
  70.  
  71. 详细出处参考：http://www.jb51.net/article/24681.htm

（转）jquery实现图片轮播的更多相关文章

  1. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  2. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  3. jQuery.YesShow - 图片轮播插件（带图片放大功能）

    jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes">         <ul> ...

  4. 基于jquery的图片轮播 （IE8以上）

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. jQuery实现图片轮播

    之前有碰到过jQuery实现列表自动滚动,这次的图片轮播在原理上与之相同,只有一些细微的差别,就是需要在图片的右下角显示当前图片的序号,效果如下: 先看一看html代码,以及对应的css代码: < ...

  6. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  7. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  8. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  9. html css+div+jquery实现图片轮播

    一直想自己动手做一个图片轮播的控件,查查网上的资料大多引用已经做好的组件,其原理算法不是很清楚,于是自己用jquery写了一个.先看下效果图: 主要界面实现思路如下: 1.新建一个div宽度为100% ...

随机推荐

  1. CSS入门之定义和应用格式

    1:定义 1:定义单个属性 property:value 例如: color:white(属性和值之间用冒号隔开) 2:定义多个属性 property:value;property:value 例如: ...

  2. AC日记——Andryusha and Colored Balloons codeforces 780c

    C - Andryusha and Colored Balloons 思路: 水题: 代码: #include <cstdio> #include <cstring> #inc ...

  3. centos6.5 python2.7.8 安装scrapy总是出错【解决】

    pip install Scrapy 报错: UnicodeDecodeError: 'ascii' codec can't decode byte 0xb4 in position python s ...

  4. Burp Suite的使用介绍

    在网上找了一篇关于Burp Suite的使用介绍,感觉写的基础的,下面就copy了,另外还有一篇<BurpSuite实战指南>的pdf是一位好心的“前辈”共享的https://www.gi ...

  5. SPOJ PT07J - Query on a tree III(划分树)

    PT07J - Query on a tree III #tree You are given a node-labeled rooted tree with n nodes. Define the ...

  6. 【神奇の做法】bzoj2456 mode

    题解:http://www.tuicool.com/articles/BfQBzif #include<cstdio> using namespace std; int n,x,ans,t ...

  7. Problem Y: 零起点学算法21——摄氏温度转换

    #include<stdio.h> int main() { float f,c; while(scanf("%f",&f)!=EOF) c=*(f-); pr ...

  8. 键盘事件OnKeyListener

    1.效果图:就是在文本框中输入A,则显示A,输入B,则显示B.... (1)activity_main.xml <?xml version="1.0" encoding=&q ...

  9. iOS 多线程之NSOperation篇举例详解

    这篇博客是接着总篇iOS GCD NSOperation NSThread等多线程各种举例详解写的一个支篇.总篇也包含了此文的链接.本文讲解的知识点有NSBlockOperationClick,队列, ...

  10. rem 自适应

    最近在写一个关于小说阅读的webApp,由于没有借用任何框架,所以很多底层的内容都需要自己去解决,幸好的是这次只是关于移动端的内容,还不至于去向着jquery的方向码代码.言归正传,前几天在处理底色切 ...