純屬個人隨筆，不當之處，歡迎指正。
代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>圖片無縫輪播顯示</title>
<script type="text/javascript" src="JavaScript/jquery-1.11.2.min.js"></script>
<style>
.box,.box2{
width:800px;
height:260px;
margin:160px auto;
overflow:hidden;
position:relative;}
.box,.box2 p{
text-align:center;}
.picBox,.picBox2{
margin:0px;
padding:0px;
list-style:none;
width:1500px;} <!--此處很關鍵，在實現無疑輪播時這個寬度一定要比顯示圖片數量+1的寬度寬-->
.picBox:hover,.picBox2:hover{
cursor:pointer;}
.picBox li,.picBox2 li{
float:left;}
.picBox img,.picBox2 img{
width:200px;
height:240px;}
</style>
</head>
<body>
<div class="box">
<p>第一種圖片輪播：非無縫輪播</p>
<ul class="picBox">
<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>
</div>
<div class="box2">
<p>第二種圖片輪播：無縫輪播</p>
<ul class="picBox2">
<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>
</div>
<script>
$(function(){
<!--第一種圖片輪播：非無縫輪播-->
function rollOne(){
$(".picBox li:first").animate({left:"-=200px"},"linear",function(){
$(this).remove().clone(true).appendTo(".picBox").fadeIn("slow");
});
}
var startRollOne=setInterval(rollOne,2000);
<!--鼠標移入停止移出繼續-->
$(".box").hover(function(){
clearInterval(startRollOne);
},function(){
startRollOne=setInterval(rollOne,2000);
});
<!--第二種圖片輪播：無縫輪播-->
<!--這種無縫輪播可以通過設置animate動畫播放速度值和setInterval中的函數調用時間間隔實現間隔無縫輪播-->
function rollTwo(){
$(".picBox2").animate({marginLeft:"-200px"},2000,"linear",function(){
$(".picBox2").css({marginLeft:"0px"});
$(".picBox2 li:first").remove().clone(true).appendTo(".picBox2");
})
}
var startRollTwo=setInterval(rollTwo,2000);
<!--鼠標移入停止移出繼續-->
$(".picBox2").hover(function(){
$(".picBox2").stop();
clearInterval(startRollTwo);
},function(){
startRollTwo=setInterval(rollTwo,2000);
});
});
</script>
</body>
</html>
效果如下：
