JQuery实现图片轮换

jQuery 函数 图片 CSS

[html] view plain copy

1. 这段时间在做公司网站,要用到图片的切换,从网上下载了一下JQuery实现图片切换的方法,再次做一个小小的总结。  

网页中Html代码如下:(仅图片切换的代码)

[html] view plain copy

1. <div id="img">  
2.         <ul>  
3.             <li><img src="ProductImage/广告.png" alt="打造网络信息安全产品专家"/></li>  
4.             <li><img src="ProductImage/广告1.png" alt="分享,高效,务实,创新"/></li>  
5.             <li><img src="ProductImage/广告2.png" alt="WPS,Word,Html,CAD,PDF"/></li>  
6.         </ul>  
7. </div>  

相关的Css代码为:

[css] view plain copy

1. /*设置图片轮换的css样式*/  
2.     #img  
3.     {  
4.         width:1085px;  
5.         height:280px;  
6.         margin:0px auto;  
7.         position:relative;  
8.         overflow:hidden;  
9.         margin-left:auto;  
10.         margin-right:auto;  
11.     }  
12.     #img ul  
13.     {  
14.         list-style-type:none;  
15.         position: absolute;  
16.         padding:0px;  
17.         margin:0px;  
18.         float:left;  
19.     }  
20.     #img ul li  
21.     {  
22.         height:280px;  
23.         width:1085px;  
24.         position:absolute;  
25.         line-height:280px;  
26.     }  

然后是JQuery代码,实现图片的轮换(记得引入JQuery-mini,js文件)
<script type="text/javascript" language="javascript" src="JS/jquery-1.4.2.min.js"></script>

[javascript] view plain copy

1. /*图片切换的JQuery代码*/  
2.     $(function () {  
3.         //获取Div的ul对象  
4.         var ul = $("#img ul");  
5.         //获取Div的li对象  
6.         var li = $("#img li");  
7.         //设置切换速度  
8.         var speed = 2000;  
9.         var autospeed = 6000;  
10.         var i = 1;  
11.         var index = 0;  
12.         var n = 0;  
13.         var t = 3;  
14.         /*自动切换图片的函数*/  
15.         function autoroll() {  
16.             if (n >= 3) {  
17.                 n = 0;  
18.             }  
19.             ul.css({ "margin-top": "0px" });  
20.             li.css({ "margin-top": "0px" });  
21.             //设置堆叠顺序  
22.             li.eq(n).css({ "z-index": i });  
23.             //设置上下的边距  
24.             li.eq(n).css({ "margin-top": "-280px" });  
25.             n++;  
26.             i++;  
27.             //设置定时器,每隔3秒执行一次函数  
28.             timer = setTimeout(autoroll, autospeed);  
29.             //将ul设置为-400,隐藏下一层的图片  
30.             ul.animate({ marginTop: "280px" }, speed);  
31.         };  
32.         /* 鼠标悬停即停止自动轮换 */  
33.         function stoproll() {  
34.             //鼠标移上去时,停止切换  
35.             li.hover(function () {  
36.                 clearTimeout(timer);  
37.             }, function () {  
38.                 timer = setTimeout(autoroll, autospeed);  
39.             });  
40.         };  
41.         //页面刚加载时停顿5秒  
42.         function Waiting() {  
43.             if (t >= 0) {  
44.                 t--;  
45.                 setTimeout(Waiting, 1000);  
46.             }  
47.             else {  
48.                 //5秒以后程序开始自动切换图片  
49.                 autoroll();  
50.                 //注意:若将stoproll()函数写在外面,则页面加载时,先执行Waiting()函数,然后时间到5秒以后就执行autoroll()函数,stoproll()函数将不会得到执行  
51.                 stoproll();  
52.             }  
53.         };  
54.         Waiting();  
55.     });