仿照slide.js的传送带效果，最后效果在下面网站有：
http://yoo.bilibili.com/html/blog/index.htm
自己尝试实现同样效果，可是出现了定时器不受控制的情况，附上全部代码，望高手们能帮我看看哪里有问题？谢谢！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<script src="./js/jquery.min.js"></script>
<style>
*{margin:0;padding:0;}
*:before,*:after{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box}
.listBox:before,.listBox:after{content: "";display: table}
.listBox:after{clear:both;}
.carouselBox{width: 100%;height: 360px;overflow: hidden;position: relative;}
.clickSpace{width: 1000px;height:100%;margin: auto}
.maskLeft,.maskRight{height: 100%;width: 50%;position: absolute;top: 0;background: (255,255,255,.3);z-index: 2;opacity: 0;transition:opacity 0.3s ease 0s;}
.maskLeft:hover,.maskRight:hover{opacity: 1}
.maskLeft{left:-500px;}
.maskRight{right:-500px;}
.carousel{width: 100%;height:100%;}
.listBox{min-width:20000px;height: 100%;margin-left: -200%;transition: transform 500ms ease 0s;background: rgba(1,1,1,.5);
-webkit-transform:translate(0,0);
-moz-transform:translate(0,0);
-ms-transform:translate(0,0);
-o-transform:translate(0,0);
transform:translate(0,0);
}
.item{
float: left;width: 1000px;height: 100%;
}
.item:not(.active){
filter: url(blur.svg#blur);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=5, MakeShadow=false);
}
.playBox{width:100%;height: 100%;position: relative;}
.playPrev,.playNext{width: 80px;height: 80px;background: rgba(0,0,0,0.3);position: absolute;top: 50%;transform: translateY(-50%);}
.playPrev{right: 0;}
.playNext{left: 0;}
.active{}
@media screen and (min-width: 1200px) {
.carouselBox{}
}
</style>
</head>
<body>
<div class="carouselBox">
<div class="maskLeft">
<div class="playBox">
<div class="playPrev"></div>
</div>
</div>
<div class="maskRight">
<div class="playBox">
<div class="playNext"></div>
</div>
</div>
<div class="carousel">
<div class="clickSpace">
<div class="listBox">
<div class="item meishi"><img src="http://i0.hdslb.com/group1/M00/5E/EB/oYYBAFbVcv6AGEw7AARD8EguBSQ058.jpg" alt="" height="100%" ></div>
<div class="item qingyin"><img src="http://i0.hdslb.com/group1/M00/F6/AC/oYYBAFbFu42AEseIAAJcNXX3yD0807.jpg" alt="" height="100%" ></div>
<div class="item active guanlan"><img src="http://i0.hdslb.com/group1/M00/B7/0C/oYYBAFcHXSmAKAldAAKR0TIwTC0951.jpg" alt="" height="100%" ></div>
<div class="item shangyin"><img src="http://i0.hdslb.com/group1/M00/B7/09/oYYBAFcEvVaAbb61AAMCrHIU_DQ326.jpg" alt="" height="100%" ></div>
<div class="item ribenjie"><img src="http://i0.hdslb.com/group1/M00/69/14/oYYBAFbX46mAeL56AARNsz2Jhs8026.jpg" alt="" height="100%" ></div>
<div class="item meishi"><img src="http://i0.hdslb.com/group1/M00/5E/EB/oYYBAFbVcv6AGEw7AARD8EguBSQ058.jpg" alt="" height="100%" ></div>
<div class="item qingyin"><img src="http://i0.hdslb.com/group1/M00/F6/AC/oYYBAFbFu42AEseIAAJcNXX3yD0807.jpg" alt="" height="100%" ></div>
<div class="item guanlan"><img src="http://i0.hdslb.com/group1/M00/B7/0C/oYYBAFcHXSmAKAldAAKR0TIwTC0951.jpg" alt="" height="100%" ></div>
<div class="item shangyin"><img src="http://i0.hdslb.com/group1/M00/B7/09/oYYBAFcEvVaAbb61AAMCrHIU_DQ326.jpg" alt="" height="100%" ></div>
<div class="item ribenjie"><img src="http://i0.hdslb.com/group1/M00/69/14/oYYBAFbX46mAeL56AARNsz2Jhs8026.jpg" alt="" height="100%" ></div>
</div>
</div>
</div>
</div>
</body>
<script>
var carouselData=[
{"src":"http://i0.hdslb.com/group1/M00/B7/0C/oYYBAFcHXSmAKAldAAKR0TIwTC0951.jpg"},
{"src":"http://i0.hdslb.com/group1/M00/B7/09/oYYBAFcEvVaAbb61AAMCrHIU_DQ326.jpg"},
{"src":"http://i0.hdslb.com/group1/M00/69/14/oYYBAFbX46mAeL56AARNsz2Jhs8026.jpg"},
{"src":"http://i0.hdslb.com/group1/M00/5E/EB/oYYBAFbVcv6AGEw7AARD8EguBSQ058.jpg"},
{"src":"http://i0.hdslb.com/group1/M00/F6/AC/oYYBAFbFu42AEseIAAJcNXX3yD0807.jpg"}
];
var listBox=$('.carousel .listBox');
var items=$('.carousel .item');
var index = 1;
var loop = setInterval(function(){playNext(callbackN)},1000);
var itemNum=carouselData.length;
var transitioned=true;
// $(function(){
// var item = $('<div class="item"><img src="" alt="" height="100%"></div>');
// for( var i = 0;i<2*itemNum;i++){
// $('.listBox').append($('<div class="item"><img src="" alt="" height="100%"></div>'));
// if(i<itemNum){$('.listBox .item').eq(i).attr('src',carouselData[i].src);}
// else{$('.listBox .item').eq(i).attr('src',carouselData[i-itemNum].src);}
// }
// })
$('.carousel .listBox').on('transitionend',function(){
transitioned=true;
})
function callbackN(){
var delay=setTimeout(function(){
if(transitioned){
if(index==itemNum+1){
index=1;
$('.carousel .listBox').css({transition:'transform 1ms ease 0s',transform:'translate3d(0px,0px,0px)'});
$('.carousel .item.active').removeClass('active').siblings($('.carousel .item')).eq(2).addClass('active')
}
$('.playPrev').on('click',function(){clearInterval(loop);playPrev(callbackP)});
$('.playNext').on('click',function(){clearInterval(loop);playNext(callbackN)});
loop=setInterval(function(){playNext(callbackN)},1000);
}
},501);
}
function playNext(callback){
if(index<=itemNum)
{
$('.carousel .listBox').css('transition','transform 500ms ease 0s');
$('.carousel .item.active').removeClass('active').next($('carousel .item')).addClass('active');
index++;}
var transformArray= $('.carousel .listBox').css('transform'),
translateArray=transformArray.split(','),
translate=parseInt(translateArray[4]);
console.log(index,translate);
$('.carousel .listBox').css('transform','translate3d(' + (translate - 1000) + 'px, 0px, 0px)');
callback()
}
function callbackP(){
var delay=setTimeout(function(){
if(index==0)
{
index=5;
$('.carousel .listBox').css({transition:'transform 0s ease 0s',transform:'translate3d(-4000px,0px,0px)'});
$('.carousel .item.active').removeClass('active').siblings($('.carousel .item')).eq(5).addClass('active');
}
$('.playPrev').on('click',function(){clearInterval(loop);playPrev(callbackP)});
$('.playNext').on('click',function(){clearInterval(loop);playNext(callbackN)});
loop=setInterval(function(){playNext(callbackN)},1000);
},501);
}
function playPrev(callback){
if(index>=1)
{ $('.carousel .listBox').css('transition','transform 500ms ease 0s');
$('.carousel .item.active').removeClass('active').prev($('carousel .item')).addClass('active');
var transformArray= $('.carousel .listBox').css('transform'),
translateArray=transformArray.split(','),
translate=parseInt(translateArray[4]);
console.log(index,translate);
$('.carousel .listBox').css('transform','translate3d(' + (translate+1000) + 'px, 0px, 0px)');
index--}
callback()
}
$('.playNext').on('click',function(){
$('.playPrev').off('click');
$('.playNext').off('click');
clearInterval(loop);
playNext(callbackN);
})
$('.playPrev').on('click',function(){
$('.playPrev').off('click');
$('.playNext').off('click');
clearInterval(loop);
playPrev(callbackP);
})
</script>
</html>function callbackN(){
var delay=setTimeout(function(){
if(transitioned){
if(index==itemNum+1){
index=1;
$('.carousel .listBox').css({transition:'transform 1ms ease 0s',transform:'translate3d(0px,0px,0px)'});
$('.carousel .item.active').removeClass('active').siblings($('.carousel .item')).eq(2).addClass('active')
}
// $('.playPrev').on('click',function(){clearInterval(loop);playPrev(callbackP)});
// $('.playNext').on('click',function(){clearInterval(loop);playNext(callbackN)});
//loop=setInterval(function(){playNext(callbackN)},1000);
}
},501); }
function playNext(callback){
if(index<=itemNum)
{
$('.carousel .listBox').css('transition','transform 500ms ease 0s');
$('.carousel .item.active').removeClass('active').next($('carousel .item')).addClass('active');
index++;}
var transformArray= $('.carousel .listBox').css('transform'),
translateArray=transformArray.split(','),
translate=parseInt(translateArray[4]);
console.log(index,translate);
$('.carousel .listBox').css('transform','translate3d(' + (translate - 1000) + 'px, 0px, 0px)');
callback()}
function callbackP(){
var delay=setTimeout(function(){
if(index==0)
{
index=5;
$('.carousel .listBox').css({transition:'transform 0s ease 0s',transform:'translate3d(-4000px,0px,0px)'});
$('.carousel .item.active').removeClass('active').siblings($('.carousel .item')).eq(5).addClass('active');
}
// $('.playPrev').on('click',function(){clearInterval(loop);playPrev(callbackP)});
// $('.playNext').on('click',function(){clearInterval(loop);playNext(callbackN)});
//loop=setInterval(function(){playNext(callbackN)},1000);
},501);}
function playPrev(callback){
if(index>=1)
{ $('.carousel .listBox').css('transition','transform 500ms ease 0s');
$('.carousel .item.active').removeClass('active').prev($('carousel .item')).addClass('active');
var transformArray= $('.carousel .listBox').css('transform'),
translateArray=transformArray.split(','),
translate=parseInt(translateArray[4]);
console.log(index,translate);
$('.carousel .listBox').css('transform','translate3d(' + (translate+1000) + 'px, 0px, 0px)');
index--}
callback()}
$('.playNext').off().on('click',function(){
// $('.playPrev').off('click');
// $('.playNext').off('click');
clearInterval(loop);
playNext(callbackN);
loop=setInterval(function(){playNext(callbackN)},1000);
})
$('.playPrev').off().on('click',function(){
//$('.playPrev').off('click');
// $('.playNext').off('click');
clearInterval(loop);
playPrev(callbackP);
loop=setInterval(function(){playNext(callbackN)},1000);
})