利用JQuery 制作产品广告效果

这个漂亮的产品广告效果，在购物网站也是比较常见的，或是迅雷视频网站上。 效果图.如下：

动画效果介绍：这组广告效果是打开页面后图片会自动播放，从1-5共计5张图片，如果属标放到右下角的1、2、3、4、5列表上，可以自由进行切换到自己想看的图片上去。图片切换是由下到上变换的。
 

制作思路：先将这5张图片分别放入到ul的5个li列表中,
《1》求出图片个的总个数. 并当我们如果在单击1.2.3.4.5时就将它对应的数字传过去，就它显示对应的图片。
《2》如果属标放上，就停止动画（可以利用clearIntval() ），如果属标移到，我们可以利用 setIntval(函数，时间) 去每隔3000毫秒去执行一下这个函数一次。
《3》完成这个动画函数。在这个函数中首先我们可以得到这个动画区域（.slider）的高度。再利用animate自定义动画函数实现在TOP位置上变化。并且给当前li中的数字加上高亮效果。
《4》还有一点就是要使这里的TOP变化正常，一定要在当前区域的父标记(.ad)中设置"position:relative;" 一切就都已OK了。制作代码如下：

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


2》jquery 代码如下:


//超链接文字提示

$(function(){
    var len = $(".num >li").length;
    var index = 0;
    var adTimer;

    $(".num li").mouseover(function(){
        index = $(".num li").index(this); //这里的 " this " 可以换成  " $(this) "
        showImg(index);
    }).eq(0).mouseover();   //用来初如化，当打开页面时，做第一个图片为属标放上时去触发动画.
   

    //以<ad 图片>为对象, 属标滑入停止动画，属标滑出开始动画
    $(".ad").hover(function(){
            clearInterval(adTimer);
    },function(){
            adTimer = setInterval(function(){
                showImg(index);
                index++;
                if( index == len ){ index=0; }
            } , 3000);
    }).trigger("mouseleave");
})


//通过给定的的索引 显示不同的图片

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");
}


3》对应的CSS样式：



.content_right{
    background:#eee;
    border : 1px solid #AAAAAA;
    586px;
    float:left;
}


.content_right .ad {
    margin-bottom:10px;
    586px;
    height:150px;
    overflow:hidden;
    position:relative;
}

.content_right .slider,
.content_right .num {
    position:absolute;
}

.content_right .slider li{
    list-style:none;
    display:inline; 
}

.content_right .slider img{
    586px;
    height:150px;
    display:block; 
}
.content_right .num{
    right:5px;
    bottom:5px;
}
.content_right .num li{
    float: left;
    16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-family: Arial;
    font-size: 12px;
    color: #FF7300;
    background-color: #fff;
    border: 1px solid #FF7300;
    overflow: hidden;
    margin: 3px 1px;   
    cursor: pointer;
}
.content_right .num li.on{
    21px;
    height: 21px;
    line-height: 21px;  
    color: #fff;
    background-color: #FF7300;
    font-size: 16px;
    margin: 0 1px;     
    border: 0;
    font-weight: bold;
}