【JAVASCRIPT】jquery实现聚焦图

HTML框架：

    <div class="content_right">
        <div class="ad" >
             <ul class="slider" >
                <li><img src="images/ads/1.gif"/></li>
                <li><img src="images/ads/2.gif"/></li>
                <li><img src="images/ads/3.gif"/></li>
                <li><img src="images/ads/4.gif"/></li>
                <li><img src="images/ads/5.gif"/></li>
              </ul>
              <ul class="num" >
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
              </ul>
        </div>
    </div>

CSS定义如下：

    <style type="text/css">
        *{ margin:0; padding:0;}     
        .ad{ width:586px; height:150px; overflow:hidden; position:absolute;}
        .content_right .slider,.content_right .num{
            position:absolute;
        }
        .content_right .slider li{ 
            list-style:none;
            display:inline;
        }
        .content_right .slider img{ 
            width:586px; 
            height:150px;
            display:block;
        }
        .content_right .num{ 
            right:5px; 
            bottom:5px;
        }
        .content_right .num li{
            float: left;
            color: #FF7300;
            text-align: center;
            line-height: 16px;
            width: 16px;
            height: 16px;
            font-family: Arial;
            font-size: 12px;
            cursor: pointer;
            overflow: hidden;
            margin: 3px 1px;
            border: 1px solid #FF7300;
            background-color: #fff;
        }
    </style>

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

js代码：

    <script type="text/javascript">
        $(function () {
            var index = 0;
            var settime;
            $(".num li").mouseover(function () {        //为li添加鼠标事件，为了的到刚进入页面的index；
                index = $(".num li").index(this);
                showimg(index);
            }).eq(0).mouseover();   //初始化

            $(".ad").hover(function () {
                clearInterval(settime);         //当鼠标进入的时候停止，
            }, function () {                    //鼠标离开的时候设置定时器。
                settime = setInterval(function () {
                    showimg(index);
                    index++;
                    if (index == 5) {
                        index = 0;
                    }
                }, 3000);
            }).trigger("mouseleave");
        })
        function showimg(index) {
            var height = $(".slider li:first").height();
            $(".slider").stop(true).animate({ top : -index * height }, 1000);
            $(".num").find("li").siblings().css("background", "white").eq(index).css("background", "yellow");   //设置.num li的css属性
        }
    </script>

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