<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

 <title>JQUERY实现图片自动切换</title>

 <style>

 body{margin:0px; padding:0px; font-family:Arial}

 ul{list-style:none;margin:0px;padding:0px}

 .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; }

 .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; }

 </style>

 <script language="javascript" src="../Script/jquery-1.4.4.min.js"></script>

 </head>

 <body>

   <div style="height:230px; width:980px; background:#EBEBEB; position:relative" id="flash_outer">

      <div style=" position:absolute; left:0px; top:0px; width:980px; height:230px; overflow:hidden" id="flash_pic">

         <div style="width:980px; height:250px; background:url(flash_pic/1.jpg)"></div>

         <div style="width:980px; height:250px; background:url(flash_pic/2.jpg)"></div>

         <div style="width:980px; height:250px; background:url(flash_pic/3.jpg)"></div>

         <div style="width:980px; height:250px; background:url(flash_pic/4.jpg)"></div>

      </div>

      <ul style="position:absolute; right:0px; bottom:0px; height:16px" id="flash_num">

        <li class="click_over">1</li>

        <li class="click_out">2</li>

        <li class="click_out">3</li>

        <li class="click_out">4</li>

      </ul>

   </div>

 <script language="javascript">

 $(document).ready(function()

 {

    var len=$("#flash_num>li").length;

    var index=1;

    var int;

    function showSys(num)  //图片切换函数

    {

     $("#flash_num>li").removeClass().addClass("click_out").eq(num).toggleClass("click_out").addClass("click_over");

     $("#flash_pic>div").fadeOut().eq(num).fadeIn();

    }

    function ziDong()  //自动切换

    {

     if(index==len)

     {

      index=0;

     }

     showSys(index);

     index=index+1;

    }

    int=setInterval(ziDong,3000);

    $("#flash_num>li").click(function(） //点击切换

    {

     var index_num=$("#flash_num>li").index(this);

     showSys(index_num);

     index=index_num+1;  //改变全局变量的值，以便鼠标移开的时候能够衔接上

     //$(".click_out").removeClass("click_over").eq(index).addClass("click_over");

     //$(".click_out").eq(index).removeClass().addClass("click_over");

        //alert(index);

    });

    $("#flash_outer").mouseover(function()  //移动到上面时停止自动切换

        {

         clearInterval(int);

        });

    $("#flash_outer").mouseout(function()  //移开时继续自动切换

        {

         int=setInterval(ziDong,3000);

        });

 });

 </script>

 </body>

 </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. luoguP4206 [NOI2005]聪聪与可可 期望概率DP

    首先,分析一下这个猫和鼠 猫每局都可以追老鼠一步或者两步,但是除了最后的一步,肯定走两步快些.... 既然猫走的步数总是比老鼠多,那么它们的距离在逐渐缩小(如果这题只能走一步反而不能做了...) 猫不 ...

  2. Parse要垮了

    一清早收到邮件就睡不着了... 花了那么多时间熟悉api,第一个基于parse的app也要做完了... 看来国内的类似产品也不敢用了,还是老老实实用阿里云自己写backend吧...

  3. [AHOI2009]同类分布

    题目大意: 问在区间[l,r]内的正整数中,有多少数能被其个位数字之和整除. 思路: 数位DP. 极端情况下,每一位都是9,所以各位数字之和不超过9*18.(为了方便这里用了9*19) f[i][j] ...

  4. bzoj 4439: [Swerc2015]Landscaping -- 最小割

    4439: [Swerc2015]Landscaping Time Limit: 2 Sec  Memory Limit: 512 MB Description FJ有一块N*M的矩形田地,有两种地形 ...

  5. SPOJ 10628. SPOJ COT Count on a tree 可持久化线段树

    这题是裸的主席树,每个节点建一棵主席树,再加个lca就可以了. 历尽艰辛,终于A掉了这一题,这般艰辛也显示出了打代码的不熟练. 错误:1.lca倍增的时候i和j写反了,RE了5次,实在要吸取教训 2. ...

  6. [转]STRUTS2中的OGNL

    OGNL表达式是(Object-Graph Navigation Language)是对象图形化导航语言.OGNL是一个开源的项目,struts2中默认使用OGNL表达式语言来显示数据.与serlve ...

  7. HDU 5656 CA Loves GCD dp

    CA Loves GCD 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5656 Description CA is a fine comrade w ...

  8. MySQL之thread cache

    最近突然对MySQL的连接非常感兴趣,从status根据thread关键字可以查出如下是个状态 show global status like 'thread%'; +---------------- ...

  9. HDU 4667 Building Fence（2013多校7 1002题 计算几何，凸包，圆和三角形）

    Building Fence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)To ...

  10. NYOJ 618 追击

    追击 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描写叙述 因为洛丹伦南部的兽人暴动,不得不使人类联盟採取最后的手段进行镇压.国王泰瑞纳斯派出了两位最棒的圣骑士以遏制兽人的 ...