【JAVASCRIPT】jquery实现聚焦图

HTML框架：

 1     <div class="content_right">
 2         <div class="ad" >
 3              <ul class="slider" >
 4                 <li><img src="images/ads/1.gif"/></li>
 5                 <li><img src="images/ads/2.gif"/></li>
 6                 <li><img src="images/ads/3.gif"/></li>
 7                 <li><img src="images/ads/4.gif"/></li>
 8                 <li><img src="images/ads/5.gif"/></li>
 9               </ul>
10               <ul class="num" >
11                 <li>1</li>
12                 <li>2</li>
13                 <li>3</li>
14                 <li>4</li>
15                 <li>5</li>
16               </ul>
17         </div>
18     </div>

CSS定义如下：

 1     <style type="text/css">
 2         *{ margin:0; padding:0;}     
 3         .ad{ width:586px; height:150px; overflow:hidden; position:absolute;}
 4         .content_right .slider,.content_right .num{
 5             position:absolute;
 6         }
 7         .content_right .slider li{ 
 8             list-style:none;
 9             display:inline;
10         }
11         .content_right .slider img{ 
12             width:586px; 
13             height:150px;
14             display:block;
15         }
16         .content_right .num{ 
17             right:5px; 
18             bottom:5px;
19         }
20         .content_right .num li{
21             float: left;
22             color: #FF7300;
23             text-align: center;
24             line-height: 16px;
25             width: 16px;
26             height: 16px;
27             font-family: Arial;
28             font-size: 12px;
29             cursor: pointer;
30             overflow: hidden;
31             margin: 3px 1px;
32             border: 1px solid #FF7300;
33             background-color: #fff;
34         }
35     </style>

需要注意的是.content_right .slider和.content_right .num的position属性必须设置为absolute，相对定位。不然写完js代码会发现图片怎么点都不会移动，刚开始还以为是js代码写错了，到最后检查css文件才发现css写错了。罪过，罪过！

js代码：

 1     <script type="text/javascript">
 2         $(function () {
 3             var index = 0;
 4             var settime;
 5             $(".num li").mouseover(function () {        //为li添加鼠标事件，为了的到刚进入页面的index；
 6                 index = $(".num li").index(this);
 7                 showimg(index);
 8             }).eq(0).mouseover();   //初始化
 9 
10             $(".ad").hover(function () {
11                 clearInterval(settime);         //当鼠标进入的时候停止，
12             }, function () {                    //鼠标离开的时候设置定时器。
13                 settime = setInterval(function () {
14                     showimg(index);
15                     index++;
16                     if (index == 5) {
17                         index = 0;
18                     }
19                 }, 3000);
20             }).trigger("mouseleave");
21         })
22         function showimg(index) {
23             var height = $(".slider li:first").height();
24             $(".slider").stop(true).animate({ top : -index * height }, 1000);
25             $(".num").find("li").siblings().css("background", "white").eq(index).css("background", "yellow");   //设置.num li的css属性
26         }
27     </script>

$(".num li").mouseover(fun()````).eq(0).mouseover();是为了初始页面.num li 中的现实效果，如果没有此项，刚进入页面第一幅图相对应的数字不会高亮显示。