jquery实现图片无缝轮播显示（个人随笔）

浏览数：123 / 时间：2015年06月09日

纯属个人随笔，不当之处，欢迎指正。

代码如下：

<!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(){
			clearInterval(startRollTwo);	
		},function(){
			startRollTwo=setInterval(rollTwo,2000);	
		});
			
	});

</script>
 
</body>
</html>

　　效果如下：

技术分享