常见的网页效果。第一页

首页广告效果

 var len = $(".num > li").length;
            var index = 0;
            var adTimer;
            $(".num li").mouseover(function () {
                index = $(".num li").index(this);
                showImg(index);
            }).eq(0).mouseover();
            //滑入 停止动画, 滑出开始动画
            $(".ad").hover(function () {
                clearInterval(adTimer);
            }, function () {
                adTimer = setInterval(function () {
                    showImg(index)
                    index++;
                    if (index == len) {
                        index = 0;
                    }
                }, 3000)
            }).trigger("mouseleave");

 

//通过控制图片的top来显示图片
1 function showImg(index) {
                var adHeight = $(".content_right .ad").height();
                $(".slider").stop(true, false).animate({ top: -adHeight * index }, 1000);
                $(".num li").removeClass("on").eq(index).addClass("on");
            }

html代码：

<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>

 

最终效果：

        

这是网页上很常见的效果。很值得学习收藏。