function hdpqh(id,j,x){ if(j==0){ var swidth = $("#"+id).width(); //获取焦点图的宽度(显示面积) var swidth2 = $("#qhnews").width(); var len = $("#"+id+" ul li").length; //获取焦点图个数 var index = 0; var pictimer; //以下代码添加数字按钮和按钮后的半透明长条 var btn = "
"; for(var i=0; i < len; i++) { btn += "" + (i+1) + ""; } btn +="
"; $("#hbtn").append(btn); //为数字按钮添加鼠标滑入事件,以显示相应的内容 $(".qbtn span").mouseenter(function() { index = $(".qbtn span").index(this); showpics(index); }).eq(0).trigger("mouseenter"); //本例为左右滚动,即所有li元素都是在同一排向左浮动,所以这里需要计算出外围ul元素的宽度 $("#"+id+" ul").css("width",swidth * (len + 1)); $("#qhnews ul").css("width",swidth2 * (len + 1)); //鼠标滑上焦点图时停止自动播放,滑出时开始自动播放 $("#"+id).hover(function() { clearinterval(pictimer); },function() { pictimer = setinterval(function() { if(index == len) { //如果索引值等于li元素个数,说明最后一张图播放完毕,接下来要显示第一张图,即调用showfirpic(),然后将索引值清零 showfirpic(); index = 0; } else { //如果索引值不等于li元素个数,按普通状态切换,调用showpics() if(index==0){ index=index+1; } showpics(index); } index++; },5000); //此3000代表自动播放的间隔,单位:毫秒 }).trigger("mouseleave"); //显示图片函数,根据接收的index值显示相应的内容 function showpics(index) { //普通切换 var nowleft = -index*swidth; //根据index值计算ul元素的left值 $("#"+id+" ul").stop(true,false).animate({"left":nowleft},500); //通过animate()调整ul元素滚动到计算出的position var nowleft2 = -index*swidth2; $("#qhnews ul").stop(true,false).animate({"left":nowleft2},500); $(".qbtn span").removeclass("on").eq(index).addclass("on"); //为当前的按钮切换到选中的效果 } function showfirpic() { //最后一张图自动切换到第一张图时专用 $("#"+id+" ul").append($("#"+id+" ul li:first").clone()); var nowleft = -len*swidth; //通过li元素个数计算ul元素的left值,也就是最后一个li元素的右边 $("#"+id+" ul").stop(true,false).animate({"left":nowleft},500,function() { //通过callback,在动画结束后把ul元素重新定位到起点,然后删除最后一个复制过去的元素 $("#"+id+" ul").css("left","0"); $("#"+id+" ul li:last").remove(); }); $("#qhnews ul").append($("#qhnews ul li:first").clone()); var nowleft2 = -len*swidth2; //通过li元素个数计算ul元素的left值,也就是最后一个li元素的右边 $("#qhnews ul").stop(true,false).animate({"left":nowleft2},500,function() { //通过callback,在动画结束后把ul元素重新定位到起点,然后删除最后一个复制过去的元素 $("#qhnews ul").css("left","0"); $("#qhnews ul li:last").remove(); }); $(".qbtn span").removeclass("on").eq(0).addclass("on"); //为第一个按钮添加选中的效果 } }else{ var swidth = $("#"+id).width(); //获取焦点图的宽度(显示面积) var len = $("#"+id+" ul li").length; //获取焦点图个数 var index = 0; var pictimer; //以下代码添加数字按钮和按钮后的半透明长条 var btn = "
"; for(var i=0; i < len; i++) { btn += "" + (i+1) + ""; //btn += ""; } btn+='
' if(x !=undefined){ $(".son4_lf").append(btn); $(".son4_lf .btn span").mouseenter(function() { index = $(".son4_lf .btn span").index(this); showpics(index); }).eq(0).trigger("mouseenter"); }else{ $(".son4_lf").append(btn); $(".son4_lf .btn span").mouseenter(function() { index = $(".son4_lf .btn span").index(this); showpics(index); }).eq(0).trigger("mouseenter"); } //为数字按钮添加鼠标滑入事件,以显示相应的内容 // $("#"+id+" .btn span").mouseenter(function() { // index = $("#"+id+" .btn span").index(this); // showpics(index); // }).eq(0).trigger("mouseenter"); //本例为左右滚动,即所有li元素都是在同一排向左浮动,所以这里需要计算出外围ul元素的宽度 $("#"+id+" ul").css("width",swidth * (len + 1)); //鼠标滑上焦点图时停止自动播放,滑出时开始自动播放 $("#"+id).hover(function() { clearinterval(pictimer); },function() { pictimer = setinterval(function() { if(index == len) { //如果索引值等于li元素个数,说明最后一张图播放完毕,接下来要显示第一张图,即调用showfirpic(),然后将索引值清零 showfirpic(); index = 0; } else { //如果索引值不等于li元素个数,按普通状态切换,调用showpics() if(index==0){ index=index+1; } showpics(index); } index++; },5000); //此3000代表自动播放的间隔,单位:毫秒 }).trigger("mouseleave"); //显示图片函数,根据接收的index值显示相应的内容 function showpics(index) { //普通切换 var nowleft = -index*swidth; //根据index值计算ul元素的left值 $("#"+id+" ul").stop(true,false).animate({"left":nowleft},500); //通过animate()调整ul元素滚动到计算出的position if(x !=undefined){ $(".son4_lf .btn span").removeclass("on").eq(index).addclass("on"); //为当前的按钮切换到选中的效果 }else{ $(".son4_lf .btn span").removeclass("on").eq(index).addclass("on"); //为当前的按钮切换到选中的效果 } } function showfirpic() { //最后一张图自动切换到第一张图时专用 $("#"+id+" ul").append($("#"+id+" ul li:first").clone()); var nowleft = -len*swidth; //通过li元素个数计算ul元素的left值,也就是最后一个li元素的右边 $("#"+id+" ul").stop(true,false).animate({"left":nowleft},500,function() { //通过callback,在动画结束后把ul元素重新定位到起点,然后删除最后一个复制过去的元素 $("#"+id+" ul").css("left","0"); $("#"+id+" ul li:last").remove(); }); if(x !=undefined){ $(".son4_lf .btn span").removeclass("on").eq(0).addclass("on"); //为第一个按钮添加选中的效果 }else{ $(".son4_lf .btn span").removeclass("on").eq(0).addclass("on"); //为第一个按钮添加选中的效果 } } } }