图片上下翻滚式焦点图广告(基于jquery)

基于jquery的图片上下翻滚式焦点图广告代码，完全仿淘宝网首页的焦点幻灯片效果。

看参数控制代码：
<script type="text/javascript" >
$(function(){
     var len  = $(".num > li").length;
  var index = 0;
  var adTimer;
  $(".num li").mouseover(function(){
  index  =   $(".num li").index(this);
  showImg(index);
  }).eq(0).mouseover();
  //滑入停止动画，滑出开始动画 懒人建站 http://www.51xuediannao.com/
  $('.ad').hover(function(){
    clearInterval(adTimer);
   },function(){
    adTimer = setInterval(function(){
       showImg(index)
    index++;
    if(index==len){index=0;}
     } , 2000);
  }).trigger("mouseleave");
})
// 通过控制top ，来显示不同的幻灯片 懒人建站 http://www.51xuediannao.com/
function showImg(index){
        var adHeight = $(".ad").height();
  $(".slider").stop(true,false).animate({top : -adHeight*index},400);
  $(".num li").removeClass("on")
   .eq(index).addClass("on");
}
</script>

其中的 2000 是控制自动播放间隔时间的，400 是控制鼠标划过数字时图片的翻滚速度的。按照你的实际需要自行修改为合适的大小。

懒人建站 整理

TAG标签