效果預覽：http:///keleyi/phtml/image/11.htm
完整源代碼：
<!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>jQuery圖片走馬燈--</title>
<style>
#outer_keleyi_com {
overflow: hidden;width:660px
}
img {
height: 200px;
width: 130px;
}
ul {
list-style: none
}
li {
float: left;
}
#inner01, #inner02 {
float: left;
}
</style>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function () {
var outer_keleyi_com = $("#outer_ke"+"leyi_com");
var inner01 = $("#inner01");
var inner02 = $("#inner02");
inner02.html(inner01.html());
function que() {
//alert(outer_keleyi_com.scrollLeft() +" "+ inner01.width());
if (outer_keleyi_com.scrollLeft() >= inner01.width()) {
//alert(outer_keleyi_com.scrollLeft() +" "+ inner01.width());
outer_keleyi_com.scrollLeft(0);
}
else {
outer_keleyi_com.scrollLeft(outer_keleyi_com.scrollLeft() + 1);
}
}
setInterval(que, 10);
})
</script>
</head>
<body>
<div><a href="http:///a/bjac/mnmpm4bv.htm" target="_blank">原文</a></div>
<div id="outer_keleyi_com">
<div style="width:3000px;">
<div id="inner01">
<ul>
<li><img src="http:///image/a/dbkfr65p.jpg" /></li>
<li><img src="http:///keleyi/phtml/picnext/images/k03.jpg" /></li>
<li><img src="http:///keleyi/phtml/picnext/images/k04.jpg" /></li>
<li><img src="http:///image/a/tvh00n12.jpg" /></li>
<li><img src="http:///image/a/mx7s0cpe.jpg" /></li>
</ul>
</div>
<div id="inner02"> </div>
</div>
</div>
</body>
</html>