跑马灯

1.间歇跑马灯，鼠标移上去停，鼠标移出来动

<ul class="list-unstyled list-inline list-scoll" id="scrollobj2" >
<li>
<ul class="list-unstyled">
<li><img src="img/client_1.png" /></li>
<p>sdfesw</p>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><img src="img/client_1.png" /></li>
<p>sdfesw</p>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><img src="img/client_1.png" /></li>
<p>sdfesw</p>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><img src="img/client_1.png" /></li>
<p>sdfesw</p>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><img src="img/client_1.png" /></li>
<p>sdfesw</p>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><img src="img/client_1.png" /></li>
<p>sdfesw</p>
</ul>
</li>
</ul>

<style>

.list-scoll {

1. white-space: nowrap;
2. overflow: hidden;
3. width: 1000px;
4. height: 206px;

}

</style>

<script language="javascript" type="text/javascript">  //跑马灯
function scroll(obj) { 
var tmp2 = (obj.scrollLeft)++; 
//当滚动条到达右边顶端时 ，Top改Left
if (obj.scrollLeft==tmp2) obj.innerHTML += obj.innerHTML; 
//当滚动条滚动了初始内容的宽度时滚动条回到最左端 
if (obj.scrollLeft>=obj.firstChild.offsetHeight) obj.scrollLeft=0; 
} 

var MyMar2=setInterval("scroll(document.getElementById('scrollobj2'))",40); 


$("#scrollobj2").mouseover(function(){
clearInterval(MyMar2)
})
$("#scrollobj2").mouseout(function(){
MyMar2=setInterval("scroll(document.getElementById('scrollobj2'))",40);
}) 
</script> 

2.间歇性跑马灯

<style>

.maquee{ height:195px;}
.topRec_List ul{ width:100%; height:195px;}
.topRec_List li{ width:100%; height:38px; line-height:38px; text-align:center; font-size:12px; border-bottom: 1px dashed #aaa;}
.topRec_List li div{ float:left;}
.topRec_List li div:nth-child(1){ width:17%;}
.topRec_List li div:nth-child(2){ width:18%;}
.topRec_List li div:nth-child(3){ width:25%;}
.topRec_List li div:nth-child(4){ width:40%;}

</style>

<div class="topRec_List">

<div class="maquee">

            <ul>
                <li>
                    <div>1</div>
                    <div>王**</div>
                    <div>中了30元</div>
                    <div>2014/12/30 14:20</div>
                </li> 
                <li>
                    <div>2</div>
                    <div>王**</div>
                    <div>中了30元</div>
                    <div>2014/12/30 14:20</div>
                </li> 
                <li>
                    <div>3</div>
                    <div>王**</div>
                    <div>中了30元</div>
                    <div>2014/12/30 14:20</div>
                </li> 
                <li>
                    <div>4</div>
                    <div>王**</div>
                    <div>中了30元</div>
                    <div>2014/12/30 14:20</div>
                </li> 
                <li>
                    <div>5</div>
                    <div>王**</div>
                    <div>中了30元</div>
                    <div>2014/12/30 14:20</div>
                </li> 
                <li>
                    <div>6</div>
                    <div>王**</div>
                    <div>中了30元</div>
                    <div>2014/12/30 14:20</div>
                </li> 
                <li>
                    <div>7</div>
                    <div>王**</div>
                    <div>中了30元</div>
                    <div>2014/12/30 14:20</div>
                </li> 
                <li>
                    <div>8</div>
                    <div>王**</div>
                    <div>中了30元</div>
                    <div>2014/12/30 14:20</div>
                </li> 
            </ul>
        </div>

</div>

<script type="text/javascript"> 
 function autoScroll(obj){  
$(obj).find("ul").animate({  
marginTop : "-39px"  
},500,function(){  
$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);  
})  
}  
$(function(){  
setInterval('autoScroll(".maquee")',3000);
setInterval('autoScroll(".apple")',2000);
 
}) 

</script>