var img = { imageNum: 5 , imageNumWidth:163, num:0, count:document.getElementById("imagebg").getElementsByTagName("li").length, current:document.getElementById("current"), imagebg:document.getElementById("imagebg"), imagebg_li:document.getElementById("imagebg").getElementsByTagName("li"), small_pic:document.getElementById("small_pic"), imageShow:document.getElementById("imageShow"), scrollbg:document.getElementById("scrollbg"), left_img_btn:document.getElementById("left_img_btn"), right_img_btn:document.getElementById("right_img_btn"), small_pic_html:[], animate:null, autoplay:null, init:function(){ img.imagebg.innerHTML = img.imagebg.innerHTML+img.imagebg.innerHTML+img.imagebg.innerHTML; for(var i=0;i"); img.imagebg.getElementsByTagName("li")[i].style.display ="none"; }else{ img.small_pic_html.push("
  • "); } //console.log(img.small_pic_html); } //console.log(img.small_pic_html) img.small_pic.innerHTML = img.small_pic_html.join(""); img.current.style.left = "77px"; img.small_pic.style.left = "0px"; img.imagebg_li[0].style.filter = "alpha(opacity=100)"; img.imagebg_li[0].style.opacity = 1; img.left_img_btn.onclick = function(){img.play(img.num-1);} img.right_img_btn.onclick = function(){img.play(img.num+1)}; img.autoplay= setInterval(function(){img.play(img.num+1)},5000); img.imageShow.onmouseover = function(){clearInterval(img.autoplay);} img.imageShow.onmouseout = function(){img.autoplay= setInterval(function(){img.play(img.num+1)},5000); } }, play:function(i){ var small_pic_left = parseInt(img.small_pic.style.left); var current_left = parseInt(img.current.style.left); var op = 0; if(i == img.num|| img.animate!=null || i>img.count*3 || i<-1){return;} for(var x=0;x(img.count*3-1)){ i-=img.count; img.num -=img.count; img.small_pic.style.left = small_pic_left + img.imageNumWidth*(i-img.count) +"px" ; img.small_pic.getElementsByTagName("li")[i].className="currently"; small_pic_left = parseInt(img.small_pic.style.left); current_left = parseInt(img.current.style.left); }else if(i<0){ i+=img.count; img.num +=img.count; img.small_pic.style.left = small_pic_left - img.imageNumWidth*img.count +"px" ; img.small_pic.getElementsByTagName("li")[i].className="currently"; small_pic_left = parseInt(img.small_pic.style.left); current_left = parseInt(img.current.style.left); } if(i>img.num){ //如果比当前大; img.imagebg_li[i].style.display = "block"; if(parseInt(img.current.style.left)>700){ //如果活动框到了最右边--完成 //小图片向左 img.animate = setInterval(function(){ if(parseInt(img.small_pic.style.left)>(small_pic_left- img.imageNumWidth*(i-img.num)+img.imageNumWidth*(i-img.num)/10)){ img.small_pic.style.left = parseInt(img.small_pic.style.left) - img.imageNumWidth*(i-img.num)/10 +"px" ; img.imagebg_li[i].style.filter = "alpha(opacity="+(++op)*11+")"; img.imagebg_li[i].style.opacity = op/9; }else{ img.small_pic.style.left = small_pic_left - img.imageNumWidth*(i-img.num) +"px" ; img.small_pic.getElementsByTagName("li")[i].className="currently"; clearInterval(img.animate); img.num = i; img.animate = null; } },30); }else{ //活动框向右--完成 img.animate = setInterval(function(){ if(parseInt(img.current.style.left)<(current_left + img.imageNumWidth*(i-img.num)-img.imageNumWidth*(i-img.num)/10)){ img.current.style.left = parseInt(img.current.style.left) + img.imageNumWidth*(i-img.num)/10 +"px" ; //为了IE联盟 img.imagebg_li[i].style.filter = "alpha(opacity="+(++op)*11+")"; //"alpha(opacity=100)"; //为了火狐部落 img.imagebg_li[i].style.opacity = op/9; }else{ img.current.style.left = current_left + img.imageNumWidth*(i-img.num) +"px" ; img.small_pic.getElementsByTagName("li")[i].className="currently"; clearInterval(img.animate); img.num = i; img.animate = null; } },30); } }else if(i(current_left - img.imageNumWidth*(img.num-i)+img.imageNumWidth*(img.num-i)/10)){ img.current.style.left = parseInt(img.current.style.left) - img.imageNumWidth*(img.num-i)/10 +"px" ; img.imagebg_li[i].style.filter = "alpha(opacity="+(++op)*11+")"; img.imagebg_li[i].style.opacity = op/9; }else{ img.current.style.left = current_left - img.imageNumWidth*(img.num-i) +"px" ; img.small_pic.getElementsByTagName("li")[i].className="currently"; clearInterval(img.animate); img.num = i; img.animate = null; } },30); } } } }