JQuery实现滚动广告

用JQuery实现简单的滚动广告:

实现的思想是,定义一个div,div大小跟每张图片的大小一致。在div里面定义两个ul列表,一个用于显示图片,一个用于控制图片.定义div的 overflow值为hidden,使div内只能显示一张图片,然后利用JQuery的animate()实现整个ul的上下移动,使之显示指定的图片。

HTML代码

 1 <div id="d1">
 2             <ul id="adv">
 3                 <li><img src="images/1.jpg" alt="1" />
 4                 </li>
 5                 <li><img src="images/2.jpg" alt="2" />
 6                 </li>
 7                 <li><img src="images/3.jpg" alt="3" />
 8                 </li>
 9                 <li><img src="images/4.jpg" alt="4" />
10                 </li>
11                 <li><img src="images/5.jpg" alt="5" />
12                 </li>
13             </ul>
14             <ul id="num">
15                 <li>
16                     1
17                 </li>
18                 <li>
19                     2
20                 </li>
21                 <li>
22                     3
23                 </li>
24                 <li>
25                     4
26                 </li>
27                 <li>
28                     5
29                 </li>
30             </ul>
31         </div>

CSS代码

 1     * {
 2                 margin: 0px;
 3                 padding: 0px;
 4             }
 5             #d1 {
 6                 border: 2px solid #E98C36;
 7                 width: 548px;
 8                 height: 177px;
 9                 margin-left: 30%;
10                 margin-top: 10%;
11                 position: relative;
12                 overflow: hidden;
13             }
14             #adv, #num {
15                 position: absolute;
16             }
17             ul li {
18                 list-style: none;
19                 display: inline;
20             }
21             ul img {
22                 width: 548px;
23                 height: 177px;
24                 display: block;
25             }
26             #num {
27                 right: 5px;
28                 bottom: 5px;
29             }
30             #num li {
31                 float: left;
32                 color: #FF7300;
33                 text-align: center;
34                 line-height: 16px;
35                 width: 16px;
36                 height: 16px;
37                 font-family: Arial;
38                 font-size: 12px;
39                 cursor: pointer;
40                 overflow: hidden;
41                 margin: 3px 1px;
42                 border: 1px solid #FF7300;
43             }
44             .on {
45                 line-height: 21px;
46                 width: 21px;
47                 height: 21px;
48                 font-size: 16px;
49                 margin: 0 1px;
50                 border: 0;
51                 background-color: red;
52                 font-weight: bold;
53             }

JS代码

 1 <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
 2         <script type="text/javascript">
 3             var i = 0;
 4             $(function() {
 5                 //当鼠标移到所有的li下标时
 6                 $("#num li").mouseover(function() {
 7                 //获得当前li的下标
 8                 var index=$("#num li").index(this);
 9                 //调用showImage()完成图片的滚动
10                 showImage(index);
11                 }).eq(0).mouseover();
12                 //加载页面时触发
13 
14                 var taskId;
15                 $("#d1").hover(function(){
16                 //当鼠标移到图片上时停止滚动
17                 clearInterval(taskId);
18                 },function(){
19                 //当鼠标移走时开始滚动
20                 taskId=setInterval(function(){
21                 showImage(i);
22                 i++;
23                 if(i==5) i=0;
24                 },2000);
25                 }).mouseleave();
26             });
27             //完成图片的滚动
28             function showImage(index) {
29                 i=index;
30                 //执行当前的动画,如果之前的动画还没有完成,则立即清除之前的动画
31                 $("#adv").stop(true).animate({
32                     top : -177 * index
33                 }, 1000)
34                 //当前的li下标,高度显亮;并且使之前显亮的下标恢复原来的颜色
35                 $("#num li").eq(index).addClass("on").siblings().removeClass("on");
36             }
37         </script>