想自己写一个javascript平滑移动的功能想每隔3秒向左移动一个图片,当全部的图片都移出后,再次向右滑动到初始状态,但是写的不尽人意,请指点一下平滑移动的算法,谢谢。/////////////////////////////////////////////////////////////////////////////////////////////////////
页面内容如下:
<div id="divCurrent" style="overflow: hidden; width: 100px; height: 100px; border: 1px solid red;">
<div id="divImageMain" style="margin-left: -4px; width: 530px;">
<img style="float: left;" id="img1" class="ImgSwitch" src="/images/1.jpg" height="100px" width="100px">
<img style="float: left;" id="img2" class="ImgSwitch" src="/images/2.jpg" height="100px" width="100px">
<img style="float: left;" id="img3" class="ImgSwitch" src="/images/3.jpg" height="100px" width="100px">
<img style="float: left;" id="img4" class="ImgSwitch" src="/images/4.jpg" height="100px" width="100px">
<img style="float: left;" id="img5" class="ImgSwitch" src="/images/5.jpg" height="100px" width="100px">
</div>
</div>
/////////////////////////////////////////////////////////////////////////////////////////////////////
Javascript脚本如下: <script type="text/javascript" src="/Script/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
m= setInterval("Move()",3000);
})
var m;
function Move()
{
var divImageMain = $("#divImageMain");
var margin_left = divImageMain.css("margin-left");
var marginleft = parseInt(margin_left.replace("px",""));
CurrentControl = divImageMain;
CurrentMarginLeft = marginleft;
s = setTimeout("Slide()",1);
// marginleft -= 100;
// margin_left = marginleft+"px";
// divImageMain.css("margin-left",margin_left);
}
var CurrentControl;
var CurrentMarginLeft;
var s;
var icount=0;
function Slide()
{
CurrentMarginLeft-=1;
CurrentMarginLeft=CurrentMarginLeft+"px";
CurrentControl.css("margin-left",CurrentMarginLeft);
if(icount!=100)
{
icount++;
}
else
{
icount = 0;
clearTimeout(s);
}
}
</script>
页面内容如下:
<div id="divCurrent" style="overflow: hidden; width: 100px; height: 100px; border: 1px solid red;">
<div id="divImageMain" style="margin-left: -4px; width: 530px;">
<img style="float: left;" id="img1" class="ImgSwitch" src="/images/1.jpg" height="100px" width="100px">
<img style="float: left;" id="img2" class="ImgSwitch" src="/images/2.jpg" height="100px" width="100px">
<img style="float: left;" id="img3" class="ImgSwitch" src="/images/3.jpg" height="100px" width="100px">
<img style="float: left;" id="img4" class="ImgSwitch" src="/images/4.jpg" height="100px" width="100px">
<img style="float: left;" id="img5" class="ImgSwitch" src="/images/5.jpg" height="100px" width="100px">
</div>
</div>
/////////////////////////////////////////////////////////////////////////////////////////////////////
Javascript脚本如下: <script type="text/javascript" src="/Script/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
m= setInterval("Move()",3000);
})
var m;
function Move()
{
var divImageMain = $("#divImageMain");
var margin_left = divImageMain.css("margin-left");
var marginleft = parseInt(margin_left.replace("px",""));
CurrentControl = divImageMain;
CurrentMarginLeft = marginleft;
s = setTimeout("Slide()",1);
// marginleft -= 100;
// margin_left = marginleft+"px";
// divImageMain.css("margin-left",margin_left);
}
var CurrentControl;
var CurrentMarginLeft;
var s;
var icount=0;
function Slide()
{
CurrentMarginLeft-=1;
CurrentMarginLeft=CurrentMarginLeft+"px";
CurrentControl.css("margin-left",CurrentMarginLeft);
if(icount!=100)
{
icount++;
}
else
{
icount = 0;
clearTimeout(s);
}
}
</script>
{
CurrentMarginLeft--;
CurrentControl.css("margin-left",CurrentMarginLeft + 'px');
if(icount<=100)
{
icount++;
setTimeout(slide, 10);
}
else
{
icount = 0;
}
}
http://blog.csdn.net/wtcsy/archive/2009/05/12/4171288.aspx