animate實例介紹

1.animate，setInterval組合不斷滾動；

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

clearInterval  用法：

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

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

2.animate，setTImeout組合不斷滾動；

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

clearTimeout用法跟  clearInterval 同樣

 

分析1：滾動模式：一直往一個方向滾動（往右滾動）

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

分析2：滾動模式：帶左右按鈕滾動

$("#right").click(function(){        //點擊事件
    ss(-1)
})
$("#left").click(function(){
    ss(1)
})

function ss (a){                    // 滾動
  $().animate({left:-200});
}

分析3：滾動模式：帶左右按鈕滾動,不點擊自由滾動

autoss();
$("#right").click(function(){      // 點擊事件
    ss(-1)
})
$("#left").click(function(){
    ss(1)
})

function ss (a){                       // 點擊滾動
  $().animate({left:-200});
}

function autoss(){         // 本身滾動
    $().animate({left:-200});
    ht = setTimeout("autoss()",1000)
}

 

 

事例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: 0; top: 0; z-index: 0; overflow: hidden}
    .cc3{position: relative;}
    .cc3 li{opacity: 0; position: absolute; z-index:0;}
    .cc3 li.nav{ z-index: 1}
    .cc3 li.first{opacity: 1;}
</style>

js

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

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(0).addClass("nav");
        
        $(".cc3 li").eq(n).fadeTo(1000,0);
        $(".cc3 li").eq(0).fadeTo(1000,1);
    }else{
        $(".cc3 li").removeClass("nav");
        $(".cc3 li").eq(n+c).addClass("nav");
        
        $(".cc3 li").eq(n).fadeTo(1000,0);
        $(".cc3 li").eq(n+c).fadeTo(1000,1);    
    }
    
    

}


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(0).addClass("nav");
        
        $(".cc3 li").eq(n).fadeTo(1000,0);
        $(".cc3 li").eq(0).fadeTo(1000,1);
    }else{
        $(".cc3 li").removeClass("nav");
        $(".cc3 li").eq(n+1).addClass("nav");
        
        $(".cc3 li").eq(n).fadeTo(1000,0);
        $(".cc3 li").eq(n+1).fadeTo(1000,1);    
    }
    
    at = setTimeout("autoscroll()",7000);
}
</script>