标签：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.middle{
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
}
.fll{
height: 100%;
position: absolute;
left: 0;
}
.fll img{
width:200px;
height: 200px;
float: left;
border: 0;
}
</style>
</head>
<body>
<div class="middle">
<div class="fll">
<img src="1.jpg" >
<img src="2.jpg" >
<img src="3.jpg" >
<img src="2.jpg" >
</div>
</div>
<input type="button" value="左" id="left">
<input type="button" value="右" id="right">
</body>
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(function(){
$(".fll img").css({
"float":"left"
})
$(".fll").html($(".fll").html()+$(".fll").html());
var index=0;
var width=$(".fll>img").eq(0).width();
var length=$(".fll>img").length;
var num=$(".fll>img").length/2;
$(".fll").width(length*width);
// 移动函数
function move(){
$(".fll").stop().animate({
left:-index*width
},500);
}
// 无缝向右
$("#right").on("click",function(){
index++;
if(index>num){
$(".fll").css("left",0);
index=1;
}
move();
})
// 无缝向左
$("#left").on("click",function(){
index--;
if(index<0){
$(".fll").css("left",-length/2*width);
index=num-1;
}
move();
})
})
</script>
</html>
jq无缝滚动
标签：
原文地址：http://www.cnblogs.com/nation1/p/4446825.html
