jquery 图片自动切换 

 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>

 

posted @ 2016-06-02 16:19  魔流剑  阅读(512)  评论(0)  编辑  收藏  举报