返回顶部

收藏

jquery 图片自动切换

更多
    <!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>  

标签:javascript

收藏

0人收藏

支持

0

反对

0

相关聚客文章
  1. K-Res 发表 2018-10-27 12:10:11 关于Javascript中类成员函数中内嵌函数的this闭包问题
  2. 杨魁 发表 2018-10-25 07:28:13 Under the Hood: NaN of JS
  3. 尖兵 发表 2018-10-25 11:03:47 服务重启导致的Java服务抖动CPU占用高
  4. 可乐加糖 发表 2018-10-23 08:31:16 JavaScript文档生成器JSDuck
  5. 可乐加糖 发表 2018-10-23 08:31:16 JavaScript文档生成器JSDuck
  6. wenming.gapo 发表 2018-10-23 11:32:30 AOP装饰函数与小T的情愫(二)
  7. 尖兵 发表 2018-10-18 13:19:02 Java诊断工具Arthas
  8. 尖兵 发表 2018-10-18 13:19:02 Java诊断工具Arthas
  9. hellas 发表 2018-10-18 14:20:31 AOP装饰函数与小T的情愫
  10. 博主 发表 2018-10-15 10:02:38 生成聚合收款二维码:支付宝、微信、QQ 钱包
  11. axiu 发表 2018-10-14 02:30:40 微信小程序开发总结
  12. xirruiqiang 发表 2018-10-14 08:14:43 round 函数在不同语言中的实现乱象