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.  <style>
  7.  body{margin:0px; padding:0px; font-family:Arial}
  8.  ul{list-style:none;margin:0px;padding:0px}
  9.  .click_out{margin-left:5px; float:left; text-align:center; height:16px; line-height:16px; width:16px; background:#333; color:#FFF; font-weight:bold; font-size:12px; cursor:pointer;_display:inline-block; }
  10.  .click_over{margin-left:5px; float:left;text-align:center; height:16px; line-height:16px; width:16px; background:#820000; color:#FFF; font-weight:bold; font-size:12px; cursor:pointer; _display:inline-block; }
  11.  </style>
  12.  <script language="javascript" src="../Script/jquery-1.4.4.min.js"></script>
  13.  </head>
  14.  <body>
  15.    <div style="height:230px; width:980px; background:#EBEBEB; position:relative" id="flash_outer">
  16.       <div style=" position:absolute; left:0px; top:0px; width:980px; height:230px; overflow:hidden" id="flash_pic">
  17.          <div style="width:980px; height:250px; background:url(flash_pic/1.jpg)"></div>
  18.          <div style="width:980px; height:250px; background:url(flash_pic/2.jpg)"></div>
  19.          <div style="width:980px; height:250px; background:url(flash_pic/3.jpg)"></div>
  20.          <div style="width:980px; height:250px; background:url(flash_pic/4.jpg)"></div>
  21.       </div>
  22.       <ul style="position:absolute; right:0px; bottom:0px; height:16px" id="flash_num">
  23.         <li class="click_over">1</li>
  24.         <li class="click_out">2</li>
  25.         <li class="click_out">3</li>
  26.         <li class="click_out">4</li>
  27.       </ul>
  28.    </div>
  29.  <script language="javascript">
  30.  $(document).ready(function()
  31.  {
  32.     var len=$("#flash_num>li").length;
  33.     var index=1;
  34.     var int;
  35.     function showSys(num)  //图片切换函数
  36.     {
  37.      $("#flash_num>li").removeClass().addClass("click_out").eq(num).toggleClass("click_out").addClass("click_over");
  38.      $("#flash_pic>div").fadeOut().eq(num).fadeIn();
  39.     }
  40.     function ziDong()  //自动切换
  41.     {
  42.      if(index==len)
  43.      {
  44.       index=0;
  45.      }
  46.      showSys(index);
  47.      index=index+1;
  48.     }
  49.     int=setInterval(ziDong,3000);
  50.     $("#flash_num>li").click(function(） //点击切换
  51.     {
  52.      var index_num=$("#flash_num>li").index(this);
  53.      showSys(index_num);
  54.      index=index_num+1;  //改变全局变量的值，以便鼠标移开的时候能够衔接上
  55.      //$(".click_out").removeClass("click_over").eq(index).addClass("click_over");
  56.      //$(".click_out").eq(index).removeClass().addClass("click_over");
  57.         //alert(index);
  58.     });
  59.     $("#flash_outer").mouseover(function()  //移动到上面时停止自动切换
  60.         {
  61.          clearInterval(int);
  62.         });
  63.     $("#flash_outer").mouseout(function()  //移开时继续自动切换
  64.         {
  65.          int=setInterval(ziDong,3000);
  66.         });
  67.  });
  68.  </script>
  69.  </body>
  70.  </html>

jquery 图片自动切换的更多相关文章

  1. jquery背景自动切换特效

    查看效果网址:http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: <!DOCTYPE html PUBLIC ...

  2. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  3. js实现图片自动切换效果。

    js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...

  4. jquery 图片自动无缝滚动

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...

  5. jQuery图片自动添加水印插件

    JS脚本(jQuery)为图片加水印效果预览:http://hovertree.com/texiao/jquery/94/ 本功能使用HTML5实现,可为图片加上文字水印,可设置文字,设置颜色,位置等 ...

  6. tab切换效果 网站中的图片自动切换

    网站中的图片自动切换 今天上一套tab切换效果的代码 动图就自己实现吧! 下面贴HTML代码,大体分两部分,图片div和按钮div,代码很容易看懂~ <!DOCTYPE html> < ...

  7. jquery图片播放切换插件

    点击这里查看效果可自定义数字样式和左右点击按钮 这个更好:移入按钮切换版本 更多图片轮播 以下是HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  8. 利用JS实现点击按钮后图片自动切换

    我么常常看到一个网站的主界面的图片可以切换自如,那么又是如何实现的呢? 1.HTML页面布局如图所示: Main(div) top(div)(显示需要显示的图片) bottom UL (li)< ...

  9. jquery 图片无缝切换

    想要和园友分享一下学习jquery的经验.总结,更希望园友提出点建议. 第一次写,有不好的地方请多多见谅! 文笔有限,很多时候不知道怎么来描述,唉.硬伤啊!!那只好多做了,贴代码... ok,废话少说 ...

随机推荐

  1. [BZOJ3676][APIO2014]回文串(Manacher+SAM)

    3676: [Apio2014]回文串 Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 3097  Solved: 1408[Submit][Statu ...

  2. Unity快捷键总结

    Shift+Alt+A  物体快速激活 Ctrl+P 开始 Ctrl+Shift+P 暂停 Ctrl+B  编译并运行 Z  Pivot/Center切换 X Local/Global切换

  3. JavaScript Diagramming

    JavaScript Diagramming Optensity

  4. java内存分配 常量池详解

    http://www.cnblogs.com/qinqinmeiren/archive/2011/07/19/2151683.html

  5. JavaScript中的call和apply应用

    ECMAScript3给Function的原型定义了两个方法,他们是Function.prototype.call 和 Function.prototype.apply. 在实际开发中,特别是在一些函 ...

  6. 【JS】 JS毫秒值转化为正常格式 或者正常格式转化为毫秒值

    1.毫秒值转化为正常时间格式  最简单的方法 new Date(后台传来的毫秒值).toLocaleDateString() 就是这个样子 2.毫秒值转化为自定义的时间格式 本页面重写一下  toLo ...

  7. animate()--jq动画

    2参数,样式,时间 $(this).animate({top:"100px","opacity": "0"},1000) 3参数,样式,时间 ...

  8. mysql concat函数进行模糊查询

    concat() 函数,是用来连接字符串. 精确查询: select * from user where name=”zhangsan” 模糊查询: select * from user where ...

  9. 实用Linux命令

    lsof -i:6379 查看某个端口的程序有没有起起来. netstat -tnlp 可以查看监听的端口,其中l是listening, p是显示program, n是显示ip而不是name, t看起 ...

  10. webshell三剑客[aspxspy、phpspy、jspspy]

    ASPSPY:http://www.rootkit.net.cn/article.asp?id=132<已关闭> 下载:ASPXspy2 JSPSPY:http://www.forjj.c ...