图片切换效果

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

1.当光标滑过数字1时，需要显示第1张图片,当光标滑过数字2时，需要显示第2张图片。以此类推。

如果能正确获取到当前滑过的数字，那么完成该效果就非常简单了。

 

$(function(){
   var index=0;
   $(".num li").mouseover(function(){
      showImg(index);
   }).eq(0).mouseover();
})

//定义了一个showImg()函数，然后给函数传递了一个参数index,index代表当前要显示图片的索引。获取当前滑过的<li>元素在所有的<li>元素中的索引可以使用jQuery的index()方法来获取。

其中.eq(0).mouseover()部分是用来初始化。让第1个数字高亮并显示第1个广告，如果需要可以修改eq()方法中的数字来让页面默认显示任意一个广告。

 

代码如下:

var index=0;
$(".num li").mouseover(function(){
  index=$(".num li").index(this);
  showimg(index);
}).eq(0).mouseover();
//接下来完成showImg()函数，showImg()函数代码如下:
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");
}

 

首先用$(".content_right .ad").height()方法获取产品广告的高度，然后使用animate()方法来达到动画效果，

每个图片滚动的高度有所不同，可以通过传入的参数index的值乘以产品广告的高度来得到，在animate()方法前，

使用stop(true,false)方法将未执行完成的动画队列清空。但不将正在执行的动画跳转到未状态，

最后使用$(".num li").eq(index).addClass("on").removeClass("on");来给当前的广告数字添加高亮样式。

 

现在，当光标在广告右下角的数字滑过时，广告就会有上下翻转的效果。但如果不去碰它，

那么广告始终不会动，因此接下来需要为广告添加自动执行效果，自动执行与做"最新动态"时的新闻列表类似，

可以使用trigger()方法来触发，因此可以写出类似的代码，代码如下所示:

var adTimer;
$('.ad').hover(function(){
   clearInterval(adTimer);
},function(){
 
 adTime= setInterval(function(){
  //
 },3000);
}).trigger("mouseleave");

 

setInterval()方法的第1个参数中，需要实现以下功能。

1.调用showImg(index)来显示广告效果

2.每调用一次，给index 加1

如果index的大小等于广告展示的总数量，那么重头开始 设置index为0

adtimer = setInterval(function(){
 showImg(index);
 index++;
 if(index==len){
   index=0;
 }
})
 

最终完整代码如下:

$(function(){
   var len = $(".num>li").length;
   var inex = 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;
    }
       })
    }).trigger("mouseleave");
})

 

//通过控制top来显示不同的幻灯片

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

 

运行代码后，当光标滑入广告数字时，会显示不同的广告图片，当光标不碰到它时，广告图片

会自动的切换。

出处：http://www.cnblogs.com/liuyong/

作者喜欢研究 Sql Server ,ASP.NET MVC , Jquery WCF 等技术，同时关心分布式架构的设计应用。转载请保留原文链接，谢谢！