今天的主要工作是实现图片的轮播
今天的主要工作是实现图片的轮播
主要的功能是
简单的原理是将最后一张图片拼接到第一张图片进行显示，完成轮播
//单位荣誉轮播效果
function autoRollLeft(){
//大于四条 开始轮播
if(dwryCount > 4){
$("#dwryBox").animate({marginLeft:"-328.4px"},3000,"linear",function(){
$('#dwryBox').css({marginLeft:"0px"});
$('#dwryBox').children("div").first().remove().clone(true)
.appendTo('#dwryBox');
});
}
}
这里主要用到的函数是animate函数
他具体可以这样理解 $(‘选择器’).animate( 终点JSON，动画时间，回调函数)；
{marginLeft:"-328.4px"}：代表向左移动-328.4px，
3000：表示这个动作{marginLeft:"-328.4px"}花费了三秒钟
linear：这个代表动画过渡的效果
function：代表结束以后会自动调用的函数
$('#dwryBox').css({marginLeft:"0px"});：如果设置为0代表衔接的时候不需要时间
这里需要注意如何让这个animate停下来
function stopRoll() {
$("#dwryBox").stop(true, false);
clearInterval(rollInterval);
}
首先介绍一下stop的两个函数
这个代表$('#id').stop(stopAll,goToEnd)
对于两个参数的理解
stopAll 为false时，不停止被选元素所有加入队列的动画,仅停止当前的动画。stopAll为true时，停止所有加入队列的动画（如goToend为true，直接跳到当前动画的最终效果）。
goToend为false时，不允许直接跳到当前动画的最终效果(应该就是所谓的完成当前的动画吧)，goToend为true时，允许直接跳到完成当前动画的最终末尾效果
这两个函数可以解决当鼠标移入的时候动画停止的效果 setInterval() clearInterval()
rollIntervalPeople = setInterval("autoRollLeftPeople();",3000);
使用计时器每隔三秒执行一次autoRollLeftPeople()函数
清楚计时器clearInterval(rollInterval);
