var i = 0; //图片标识 var img_num = $(".img_ul").children("li").length; //图片个数 var Num1=6 var Num2=3 var m=$(".img_hd ul li").outerWidth(true)*Num1 $(".img_hd").width(m) $(".img_hd ul li:first").addClass("on") $(function() { $(".img_hd ul").css("width", ($(".img_hd ul li").outerWidth(true)) * img_num); //设置ul的长度 if (!window.XMLHttpRequest) { //对ie6设置a的位置 $(".change_a").css("height", $(".change_a").parent().height()); } $(".change_a").hover(function() { //箭头显示事件 $(this).children("span").show(); }, function() { $(this).children("span").hide(); }); $(".img_hd ul li").click(function() { i = $(this).index(); play(); }); $(".prev_a").click(function() { //i+=img_num; i--; //i=i%img_num; i = (i < 0 ? 0 : i); play(); clearInterval(time) }); $(".next_a").click(function() { i++; i=i%img_num; i = (i > (img_num - 1) ? (img_num - 1) : i); play(); clearInterval(time) }); //自动播放 function autoPlay(){ i++; i=i%img_num; i = (i > (img_num - 1) ? (img_num - 1) : i); play(); } time=setInterval(autoPlay,5000) $('.imgMove,.change_a').hover(function(){ clearInterval(time) },function(){ time=setInterval(autoPlay,5000) }) //end }); function play() { //动画移动 var img = new Image(); //图片预加载 img.onload = function() { img_load(img, $(".img_ul").children("li").eq(i).find("img")) }; img.src = $(".img_ul").children("li").eq(i).find("img").attr("src"); $(".img_hd ul").children("li").eq(i).addClass("on").siblings().removeClass("on"); if (img_num > Num1) { //大于Num1个的时候进行移动 if (i < img_num - Num2) { //前3个 $(".img_hd ul").animate({ "marginLeft": ( - ($(".img_hd ul li").outerWidth(true)) * (i - Num2 < 0 ? 0 : (i - Num2))) }); } else if (i >= img_num - Num2) { //后3个 $(".img_hd ul").animate({ "marginLeft": ( - ($(".img_hd ul li").outerWidth(true)) * (img_num - Num1)) }); } } if (!window.XMLHttpRequest) { //对ie6设置a的位置 $(".change_a").css("height", $(".change_a").parent().height()); } } function img_load() { //大图片加载设置 ( 新建的img,now_imgid当前图片) $(".img_ul").children("li").eq(i).show().siblings("li").hide(); //大小确定后进行显示 } $(".img_hd li").each(function(index, element) { $(this).find("i").html(index+1+"/"+img_num) }); $(".zoomImg2").autoZoomLoadImage(true, 70, 47); $(".zoomImg1").autoZoomLoadImage(true, 600, 400);