animate实例介绍

1.animate，setInterval组合不断滚动；

function Tscroll(){
  $().animate();
}
setInter("Tscroll()",);     //注意里面的是 Tscroll(),而不是 Tscroll

clearInterval  用法：

function Tscroll(){
  $().animate();
    Ht = setInter("Tscroll()",);
}

$().click(function(){
    clearInterval(Ht);    //注意：这里是Ht，而不是 Ht（）；
});

2.animate，setTImeout组合不断滚动；

function Fscroll(){
  $().animate();
  Ft = setTimeout("Fscroll()",)
}
Fscroll();

clearTimeout用法跟  clearInterval 一样

分析1：滚动模式：一直往一个方向滚动（往右滚动）

function ss (){
  $().animate({left:-200});
  ht = setTimeout("ss()",);
}
ss();

分析2：滚动模式：带左右按钮滚动

$("#right").click(function(){        //点击事件
    ss(-)
})
$("#left").click(function(){
    ss()
})

function ss (a){                    // 滚动
  $().animate({left:-});
}

分析3：滚动模式：带左右按钮滚动,不点击自由滚动

autoss();
$("#right").click(function(){      // 点击事件
    ss(-)
})
$("#left").click(function(){
    ss()
})

function ss (a){                       // 点击滚动
  $().animate({left:-});
}

function autoss(){         // 自己滚动
    $().animate({left:-});
    ht = setTimeout("autoss()",)
}

事例1：用fadeTo,点左往左滚动，点右往右滚动;无人点击的时候自己滚动

html代码

<div class="c1">
<!--左右-->
<div class="c33">
<span id="prev"><img src="../Public/images/lo_10.png" /></span>
<span id="next"><img src="../Public/images/lo_11.png" /></span>
</div>
<!--广告切换-->
<div class="c3">
<div class="cc3">
<ul>
<li class="nav first"><a href=""><img src="../Public/images/lo_05.jpg" /></a></li>
<li><a href=""><img src="../Public/images/lo_05_01.jpg" /></a></li>
<li><a href=""><img src="../Public/images/lo_05.jpg" /></a></li>
<li><a href=""><img src="../Public/images/lo_05_01.jpg" /></a></li>
<li><a href=""><img src="../Public/images/lo_05.jpg" /></a></li>
<li><a href=""><img src="../Public/images/lo_05_01.jpg" /></a></li>
</ul>
</div>
</div>

<style>
.c3{width: 710px; height: 386px; position: absolute; left: ; top: ; z-index: ; overflow: hidden}
    .cc3{position: relative;}
    .cc3 li{opacity: ; position: absolute; z-index:;}
    .cc3 li.nav{ z-index: }
    .cc3 li.first{opacity: ;}
</style>

js

<script>
$(document).ready(function(){
    autoscroll();
    $("#next").click(function(){
        clickscroll();
    });
    $("#prev").click(function(){
        clickscroll(-);
    });
})

function clickscroll(c){
    var num = $(".cc3 li").index();
    var n = $(".cc3 li").index($(".cc3 li.nav"));

    if(n==num){
        $(".cc3 li").removeClass("nav");
        $(".cc3 li").eq().addClass("nav");

        $(".cc3 li").eq(n).fadeTo(,);
        $(".cc3 li").eq().fadeTo(,);
    }else{
        $(".cc3 li").removeClass("nav");
        $(".cc3 li").eq(n+c).addClass("nav");

        $(".cc3 li").eq(n).fadeTo(,);
        $(".cc3 li").eq(n+c).fadeTo(,);
    }

}

function autoscroll(){
    var num = $(".cc3 li").index();
    var n = $(".cc3 li").index($(".cc3 li.nav"));

    if(n==num){
        $(".cc3 li").removeClass("nav");
        $(".cc3 li").eq().addClass("nav");

        $(".cc3 li").eq(n).fadeTo(,);
        $(".cc3 li").eq().fadeTo(,);
    }else{
        $(".cc3 li").removeClass("nav");
        $(".cc3 li").eq(n+).addClass("nav");

        $(".cc3 li").eq(n).fadeTo(,);
        $(".cc3 li").eq(n+).fadeTo(,);
    }

    at = setTimeout("autoscroll()",);
}
</script>