Jquery中图片滚动问题
才学Jquery不久,望各位大侠多多帮忙
<div id="scroller">
<div id="image">
<a href="animate.aspx" class="img"><img src="1024768.jpg" width="150px" height="150px" /></a>
<a href="animate.aspx" class="img"><img src="10247681.jpg" width="150px" height="150px" /></a>
<a href="animate.aspx" class="img"><img src="10247682.jpg" width="150px" height="150px" /></a>
<a href="animate.aspx" class="img"><img src="10247683.jpg" width="150px" height="150px" /></a>
<a href="animate.aspx" class="img"><img src="10247686.jpg" width="150px" height="150px" /></a>
</div></div>
样式及Jquery代码
<style type="text/css">
#scroller
{
position:relative;
height:150px;
width:460px;
overflow:hidden;
margin:auto;
}
#image
{
width:770px;
}
#scroller a img
{
border:0;
position:relative;
}
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//從右向左滑動
//var $txt=$('#scroller a img');
//$txt.css({left:0});
//var img=function(imgblock)
//{
//imgblock.animate({left:-770},5000,function()
//{
//imgblock.css({left:450});
//img($(this));
//}
//);
//}
//img($txt);
//從左向右滑動
var $txt=$('#scroller a img');
$txt.css({right:750});
var img=function(imgblock)
{
imgblock.animate({right:-460},5000,function()
{
imgblock.css({right:750});
img($(this));
}
);
}
img($txt);
$txt.hover(function()
{
$txt.stop();
},
function()
{
img($txt);
}
);
}
);
</script>
水平方向向左滑动,跟向右滑动时animate函数里边参数的设置不是明白,帮忙解释一下
------解决方案--------------------
$(selector).animate({params},[duration],[easing],[callback])
关键的参数是params 它定义产生动画的css属性,可以同时设置多个此类的属性
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
第二个参数是duration 它定义用来应用到动画的时间。设置的值是 slow fast normal
<script type="text/javascript">
$(document).ready(function(){
$("#start).click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});