~function(){
//绑定轮播图区域的数据
var str = " ";
if(jsonData){
for(var i = 0,len = jsonData.length;i<len;i++){
str+='
<img src="" trueImg="'+jsonData[i]['img']+'">
'
}
//为了实现无缝滚动,需要把第一张克隆一份放在末尾
str+= '
<img src="" trueImg="'+jsonData[0]['img']+'">
'
}
bannerInner.innerHTML = str;
count = jsonData.length+1;
utils.css(bannerInner,"width",count*1000);
//绑定焦点区域的数据
str = '';
if(jsonData){
for(var i = 0,len = jsonData.length;i<len;i++){
i===0?str+='<li class="bg">':str+='
';
}
}
bannerTip.innerHTML = str;
}()
//图片延迟加载
function lazyImg(){
for(var i = 0,len = imgList.length;i<len;i++){
~function(i){//这里使用闭包,来避免onload事件异步导致的只有最后一张图片延迟加载的问题
var curImg = imgList[i];
var oImg = new Image;
oImg.src = curImg.getAttribute('trueImg');
oImg.onload = function(){
curImg.src = this.src;
curImg.style.display = "block";
oImg = null;
myAnimate(curImg,{opacity:1},300)
}
}(i)
}
}
window.setTimeout(lazyImg,500);
var step = 0;//记录的是步长,(当前是哪一张图片,0是第一张图片)
//实现自动轮播
var autoTimer = window.setInterval(autoMove,2000);
function autoMove(){
if(step===count-1){
step =0;
bannerInner.style.left = 0
}
step++;
myAnimate(bannerInner,{left:-step*1000},500)
changeTip();
}
//实现焦点对齐
function changeTip(){
var tempStep = step > oLis.length-1 ? 0 : step;
for(var i = 0,len = oLis.length;i<len;i++){
var curLi = oLis[i];
i === tempStep ? utils.addClass(curLi,"bg") : utils.removeClass(curLi,"bg")
}
}
//鼠标滑过停止和开启轮播
banner.onmouSEOver = function(){
window.clearInterval(autoTimer);
bannerLeft.style.display = bannerRight.style.display = 'block';
}
banner.onmouSEOut = function(){
autoTimer = window.setInterval(autoTimer,2000);
bannerLeft.style.display = bannerRight.style.display = 'none';
}
//点击焦点实现轮播图的切换
~function(){
for(var i = 0,len = oLis.length;i<len;i++){
var curLi = oLis[i];
curLi.index = i;
curLi.onclick = function(){
step = this.index;
changeTip();
myAnimate(bannerInner,500)
}
}
}()
//实现左右切换
bannerRight.onclick = autoMove();
bannerLeft.onclick = function(){
if(step<=0){
step = count-1;
utils.css(bannerInner,"left",-step*1000);
}
step--;
autoMove();
}
})()