jquery滚动分享

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS等高布局</title>
<style type="text/css">
body { margin:0; padding:0; }
ul,li { margin:0; padding:0; }
ul li { float:left; width:100px; }
ul { list-style:none; float:left; width:300px; }
#box { width:300px; overflow:hidden; position:relative; background:#f00; height:100px; }
#boxframe { width:600px; position:absolute; top:0; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function scrolls() {
if(parseInt($('#boxframe').css('left')) == -300) { 
$('#boxframe').css('left', 0)
}
   $('#boxframe').animate({left: '-=100px'}, 500);
}
$(function() {
$('ul').clone().appendTo('#boxframe');
setInterval('scrolls()', 2000);  
});
alert(a);
</script>
</head>
<body>
<div id="box">
<div id="boxframe">
     <ul>
         <li><a href="#" target="_blank"><img src="1.jpg" width="100" height="100" /></a></li>
            <li><a href="#" target="_blank"><img src="2.gif" width="100" height="100" /></a></li>
            <li><a href="#" target="_blank"><img src="3.gif" width="100" height="100" /></a></li>
        </ul>
        
    </div>
</div>
</body>
</html> 

解决方案 »

  1.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS等高布局</title>
    <style type="text/css">
    body { margin:0; padding:0; }
    ul,li { margin:0; padding:0; }
    ul li { float:left; width:100px; }
    ul { list-style:none; float:left; width:300px; }
    #box { width:300px; overflow:hidden; position:relative; background:#f00; height:100px; }
    #boxframe { width:600px; position:absolute; top:0; }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
    function scrolls() {
    if(parseInt($('#boxframe').css('left')) == -300) { 
    $('#boxframe').css('left', 0)
    }
       $('#boxframe').animate({left: '-=100px'}, 500);
    }
    var timer;
    $(function() {
    $('ul').clone().appendTo('#boxframe');
    timer = setInterval('scrolls()', 2000);
    $('#boxframe').hover(function() {
    clearInterval(timer);  
    }, function() {
    timer = setInterval('scrolls()', 2000);
    });
    });
    alert(a);
    </script>
    </head>
    <body>
    <div id="box">
    <div id="boxframe">
         <ul>
             <li><a href="#" target="_blank"><img src="1.jpg" width="100" height="100" /></a></li>
                <li><a href="#" target="_blank"><img src="2.gif" width="100" height="100" /></a></li>
                <li><a href="#" target="_blank"><img src="3.gif" width="100" height="100" /></a></li>
            </ul>
            
        </div>
    </div>
    </body>
    </html>