点击播放下一组图片的时候是空白，没有图片，但是也没有报错，是什么问题
/*
* @Author: Administrator
* @Date: 2017-08-23 14:58:45
* @Last Modified by: Administrator
* @Last Modified time: 2017-08-23 17:43:51
*/
// JavaScript Document
var loopPlayInit=(function(){
var $butLeft = null,
$butRight = null,
$butPlay = null,
$imglist = null, //定义null，保护
origin=['135px','500px'],
imgOrigin=['125px','800px'],
imgAll = createImg([
['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg'],
['images/5.jpg','images/6.jpg','images/7.jpg','images/8.jpg'],
['images/9.jpg','images/10.jpg','images/11.jpg','images/12.jpg']
]),
imgArrIndex = 0,
imgAng = 45,
imgTime = 300,
rotating = false, //控制当前动画的动画状态
autoTimer = null, //定时器
autointerval = 1000; //定时器间隔时间
function init(){
$butLeft = $(".butLeft");
$butRight = $(".butRight");
$butPlay = $(".butPlay");
$imglist = $(".mainbox ul li");
configer(); //调用configer函数
setEvent();
}
function configer(){
var ang = 4,
aint = -4;
$imglist.transform({origin:origin});
$imglist.each(function(i){
var $this = $(this); //this是循环遍历出来的每一个当前元素
$this.transform({rotate:aint+(i*ang)+"deg"});
})
}
function setEvent(){
$butLeft.bind("click",function(){
anigo(-1);
return false; //返回空，不跳转
});
$butRight.bind("click",function(){
anigo(1);
return false;
});
$butPlay.bind("click",function(){
var play = "play",
pause = "pause",
$but = $(this);
if($but.text() == "play")
{
$but.text(pause);
autoGo();
}else{
$but.text(play);
autoShop();
}
return false;
});
}
function createImg(arr){
var imgArr = [];
for(var i in arr){
imgArr[i] = [];
for(var x in arr[i]){
imgArr[i][x] = new Image(); //将数组索引转化为图片对象
imgArr[i][x].src = arr[i][x];
}
}
return imgArr;
}
function anigo(d){
if(rotating) return false; //return直接跳出函数
rotating = true; //true:动画在执行
imgArrIndex += d;
console.log(imgAll.length);
if(imgArrIndex > imgAll.length-1){
imgArrIndex = 0;
}
else if(imgArrIndex < 0){
imgArrIndex = imgAll.length-1;
}
$imglist.each(function(i){
var $thisItme = $(this);
var $thisimg = $thisItme.children("img"); //当前存在的图片
var $targetImg = $(imgAll[imgArrIndex][i]); //新的图片
var thisTime = (d===1)?imgTime*i:imgTime*($imglist.length-1-i);
$thisItme.append($targetImg);
$thisimg.transform({origin:imgOrigin});
$targetImg.transform({origin:imgOrigin,rotate:(0-d)*imgAng+"deg"});
setTimeout(function(){
$thisimg.animate({rotate:imgAng*d + "deg"});
$targetImg.animate({rotate:"0deg"},500,function(){
$thisimg.remove();
if(thisTime == ($imglist.length-1)*imgTime){
rotating = false;}
});
},thisTime); //延时操作
})
}
function autoGo(){
clearInterval(autoTimer);
anigo(1);
autoTimer = setInterval(function(){
anigo(1);
},autointerval);
}
function autoShop(){
clearInterval(autoTimer); //清除定时器
}
return init;
})(); //追加括号，表示调用
loopPlayInit();
