<style type="text/css">
*{ margin:0; padding:0;}
body { font:12px/1.8 Arial; color:#666;}
h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;}
.go-back{ text-align:center; border-top:1px dashed #ccc; padding:10px; margin-top:20px; font-size:40px;}
.wrap{border:1px dashed #ccc; background:#f8f8f8; padding:20px;}
#slide{overflow:hidden;900px;margin:100px auto;}
ul{list-style:none;} li{float:left;} .slideul1{3999px;}
</style>
<script type="text/javascript" src="/jquery-1.4.4.min.js"></script>
<body>
<h1 class="tit-h1">jquery图片左右连续滚动</h1>
<div class="wrap">
<div id="slide">
<ul class="slideul1">
<li class="slideli1">
<ul class="slideul2">
<li><img src="images/1.jpg"/></li>
<li><img src="images/2.jpg"/></li>
<li><img src="images/3.jpg"/></li>
<li><img src="images/4.jpg"/></li>
<li><img src="images/5.jpg"/></li>
</ul> <li class="slideli2"></li> </ul>
</div>
<script type="text/javascript">
var _speed=30; var _slide = $("#slide"); var _slideli1 = $(".slideli1"); var _slideli2 = $(".slideli2"); _slideli2.html(_slideli1.html()); function Marquee(){ if(_slide.scrollLeft() >= _slideli1.width()) _slide.scrollLeft(0); else{ _slide.scrollLeft(_slide.scrollLeft()+1); } } $(function(){ //两秒后调用 var sliding=setInterval(Marquee,_speed) _slide.hover(function() { //鼠标移动DIV上停止 clearInterval(sliding); },function(){ //离开继续调用 sliding=setInterval(Marquee,_speed); }); });</script> </div>