<html>
 <head>
 <style>
.yuandian {
border-radius: 10px; /* 所有角都使用半径为5px的圆角,此属性为CSS3标准属性 */
-moz-border-radius: 10px; /* Mozilla浏览器的私有属性 */
-webkit-border-radius: 10px; /* Webkit浏览器的私有属性 */
background:#000;
width:10px; height:10px;
border-radius: 10px 10px 10px 10px; /* 四个半径值分别是左上角、右上角、右下角和左下角 */
width:10px; height:10px;
position:absolute;
left:50px; top:50px;}
</style>
 </head>
 <body>
<script type = "text/javascript" src="http://code.jquery.com/jquery-1.11.0-beta1.js"></script>
<script>
$(function(){
  
setInterval(donghua,'3000'); 
});
function donghua()
{  $('.yundongyuan').animate({'margin-left':"-10px"},'3000','linear', dingshiqi);
}
function dingshiqi()
{    $('.yundongyuan').each(function(){ if(parseInt($(this).css('margin-left'))<=0)
{
        $(this).css('margin-left','1920px');
        console.log("小圆初始化起点");
}
    });
}
</script>
<div class="yundongyuan">圆点</div>
<div class="yundongyuan">圆点</div>
<div class="yundongyuan">圆点</div>
<div class="yundongyuan">圆点</div>
 </body>
</html> 
不是可以的嘛?

解决方案 »

  1.   

    样式选择器搞错了,要一个一个来控制
    <style>
    .yundongyuan {
    border-radius: 10px; /* 所有角都使用半径为5px的圆角,此属性为CSS3标准属性 */
    -moz-border-radius: 10px; /* Mozilla浏览器的私有属性 */
    -webkit-border-radius: 10px; /* Webkit浏览器的私有属性 */
    background:#000;
    width:10px; height:10px;
    border-radius: 10px 10px 10px 10px; /* 四个半径值分别是左上角、右上角、右下角和左下角 */
    width:10px; height:10px;
    position:absolute;
    left:50px; top:50px;
     
    }
    </style>
     
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
     <script>
    $(function(){
       
        donghua();
    });
    function donghua(o) {
        if (o) {
            o = $(o);
            if (parseInt(o.css('left'), 10) < 0) o.css('left', '1920px')
             o.animate({ left: "-=10px" }, '3000', 'linear', function () { donghua(this) });
        }
        else
            $('.yundongyuan').animate({ left: "-=10px" }, '3000', 'linear', function () { donghua(this) });
    };</script> 
    <div class="yundongyuan" style="top:20px">圆点</div>
    <div class="yundongyuan" style="top:40px">圆点</div>
    <div class="yundongyuan" style="top:60px">圆点</div>
    <div class="yundongyuan" style="top:80px">圆点</div>
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> new document </title>
    <style type="text/css">
    .yundongyuan {
    position:absolute;
    left:50px;
    }
    </style>
    </head><body><script type="application/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    $(function(){
      
    donghua();
    });
    function donghua()
    {
    $('.yundongyuan').css('left','620px').animate({left:"0px"},3000,'linear', donghua);
    }
    </script>
    <div class="yundongyuan">圆点</div>
    </body>
    </html>
      

  3.   


    果然是高手 代码能解释下。。这个this作为参数是什么情况。。
      

  4.   

    animate的回调函数中this就是当前的运动对象,将这个作为参数传递进去以便分别开是初始化批量启动动画还是单个控制