首页 > 代码库 > animate实例介绍
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="http://www.mamicode.com/Public/images/lo_10.png" /></span>
<span id="next"><img src="http://www.mamicode.com/Public/images/lo_11.png" /></span>
</div>
<!--广告切换-->
<div class="c3">
<div class="cc3">
<ul>
<li class="nav first"><a href=""><img src="http://www.mamicode.com/Public/images/lo_05.jpg" /></a></li>
<li><a href=""><img src="http://www.mamicode.com/Public/images/lo_05_01.jpg" /></a></li>
<li><a href=""><img src="http://www.mamicode.com/Public/images/lo_05.jpg" /></a></li>
<li><a href=""><img src="http://www.mamicode.com/Public/images/lo_05_01.jpg" /></a></li>
<li><a href=""><img src="http://www.mamicode.com/Public/images/lo_05.jpg" /></a></li>
<li><a href=""><img src="http://www.mamicode.com/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>