JQuery 图片滚动或者div滚屏，适合多图轮播

多幅图片滚屏，效果如图：

纯手写代码，有空再做成闭包。

javascript部分：

var left=0,//移动的距离
move=1100,//滚屏的宽度
time=1000,//滚动的时间
count=0;//控制小圆点的标记
var inter;
$(function(){
	var mw=parseInt($('.mainlist').css('width'));
	$(".swaplist").html($(".mainlist").html());
	$(".swaplist").css({left:(3*move)+"px"});
	inter=setInterval(function(){
		startslider();
	},5000);
	$(".picbox").on("mouseenter",function(){
		setTimeout(function(){
			clearInterval(inter);	
		},1000);
		
	});
	$(".picbox").on("mouseleave",function(){
		console.log("鼠标移出了");
		inter=setInterval(function(){
			startslider();
		},5000);
	});
	
});
function startslider(){
	var ml=parseInt($('.mainlist').css('left'));
	var sl = parseInt($('.swaplist').css('left'));
	if(ml<=0&&ml>(0-3*move)){
		//正本滚动
		left=ml-move;
		$(".mainlist").animate({left:left+'px'},time);
		$(".swaplist").animate({left:(3*move+left)+"px"},time);
	}
	else {
		//副本滚动
		left=sl-move;
		$(".swaplist").animate({left:left+'px'},time);
		$(".mainlist").animate({left:(3*move+left)+"px"},time);
	}
	$(".circlebox li").each(function(){
		$(this).removeClass("licurrent");
		$(this).addClass("lidefault");
	});
	count++;
	$(".circlebox li").eq(count%3).removeClass("lidefault");
	$(".circlebox li").eq(count%3).addClass("licurrent");
}

CSS部分：

ul,li{ padding:0; margin:0;}
ul,li{ list-style:none;}
img{ border:none;}
a{ color:#6cf;}
a:hover{ color:#84B263;}
.box{ width:1100px; margin:0 auto; position:relative; overflow:hidden; _height:100%;margin-top:15px;border: solid 1px #f2f2f2;padding: 4px;}
.picbox{ width:5000px; height:200px; overflow:hidden; position:relative;}
.piclist{ height:200px;position:absolute; left:0px; top:0px}
.picbox ul{float: left;}
.piclist li{ margin-right:10px; float:left;width: 265px;height: 200px;}
.piclist li img{width:100%;}
.swaplist{ position:absolute; top:0px}
.og_prev,.og_next{ width:30px; height:50px; background:url(../images/icon.png) no-repeat; 
	background:url(../images/icon_ie6.png) no-repeat\9; position:absolute; 
	top:33px; z-index:99; cursor:pointer;filter:alpha(opacity=70); opacity:0.7;}
.og_prev{ background-position:0 -60px; left:4px;}
.og_next{ background-position:0 0; right:4px;}
#foot_bm a,p,p a{font-size:12px;color:#666;}

.circlebox{width:90px;margin: 0 auto;text-align: center;clear: both;height: 20px;margin-top: 10px;}
.circlebox ul,.circlebox ul li{margin: 0px;padding: 0px;}
.circlebox ul li{float: left;width: 20px;height: 15px;margin-left: 10px;}
.licurrent{background: url(images/circlegb.png) no-repeat -27px 0px;}
.lidefault{background: url(images/circlegb.png) no-repeat 0 0;}

HTML部分：

<div class="box">
	<div class="picbox">
		<ul class="piclist mainlist">
			<volist name="likelist" id="vo">
				<li  style="background-image:url(__ROOT__/data/upload/{$vo.smeta});background-repeat: no-repeat;background-position:center center;  
						width:265px;height:200px;background-size: cover;">
					<!--这样显示图片，不会变形，并且会填充满每个li的-->
				</li>
			</volist>
		</ul>
        <ul class="piclist swaplist"></ul>
	</div>
	<div class="circlebox">
		<ul>
			<li class="licurrent"></li>
			<li class="lidefault"></li>
			<li class="lidefault"></li>
		</ul>
	</div>
	
</div>

如果滚动不是3屏，除了修改上边的3，还要在这里修改li的数量。