设为首页收藏本站新闻投稿

MOD中国同盟社

 找回密码
 注册

QQ登录

只需一步,快速开始

搜索
查看: 643|回复: 1

[教程] jQurey常用动画-滚动广告样式 [复制链接]

Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20

帖子
2836
精华
2
声望
12984 点
金币
2999 Mold
被赞许
28 次
注册时间
2006-4-28

Mod中国同盟社至高荣誉

发表于 2011-7-27 09:13:17 |显示全部楼层
css
/*滚动广告样式*/
.content_right .ad {
margin-bottom:10px;
width:586px;
height:150px;/* 必须*/
overflow:hidden;/* 必须*/
position:relative;/* 必须*/

}
.content_right .slider,.content_right .num{
position:absolute;/* 必须*/
}
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>
jQuery
/*首页广告效果*/
$(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();
  //滑入 停止动画,滑出开始动画.
  $('.ad').hover(function(){
    clearInterval(adTimer);
   },function(){
    adTimer = setInterval(function(){
       showImg(index)
    index++;
    if(index==len){index=0;}
     } , 3000);
  }).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");
}
代码不完整,自己整理一下吧

使用道具 举报

头像被屏蔽

禁止发言

帖子
74
精华
0
声望
48 点
金币
-28 Mold
被赞许
-4 次
注册时间
2011-8-26
发表于 2011-8-28 16:52:11 |显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

回顶部