$(function() {
var sWidth = $("#focus").width();
var len = $("#focus ul li").length;
var index = 0;
var picTimer;
var btn = "<div class='btnBg'></div><div class='btn'>";
for(var i=0; i < len; i++) {
btn += "<span></span>";
}
btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
$("#focus").append(btn);
$("#focus .btnBg").css("opacity",0.5);
$("#focus .btn span").css("opacity",0.4).mouseenter(function() {
index = $("#focus .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");
$("#focus .preNext").css("opacity",0.2).hover(function() {
$(this).stop(true,false).animate({"opacity":"0.5"},300);
},function() {
$(this).stop(true,false).animate({"opacity":"0.2"},300);
});
$("#focus .pre").click(function() {
index -= 1;
if(index == -1) {index = len - 1;}
showPics(index);
});
$("#focus .next").click(function() {
index += 1;
if(index == len) {index = 0;}
showPics(index);
});
$("#focus ul").css("width",sWidth * (len));
$("#focus").hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(function() {
showPics(index);
index++;
if(index == len) {index = 0;}
},4000);
}).trigger("mouseleave");
function showPics(index) {
var nowLeft = -index*sWidth;
$("#focus ul").stop(true,false).animate({"left":nowLeft},300);
$("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300);
}
});var moveing = false;
function $(id) { return document.getElementById(id); }
function moveElement(elementID,final_x,final_y,interval) {
if (!document.getElementById) return false;
if (!document.getElementById(elementID)) return false;
var elem = document.getElementById(elementID);
if (elem.movement) {
clearTimeout(elem.movement);
}
if (!elem.style.left) {
elem.style.left = "0px";
}
if (!elem.style.top) {
elem.style.top = "0px";
}
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if (xpos == final_x && ypos == final_y) {
moveing=false;
return true;
}
if (xpos < final_x) {
var dist = Math.ceil((final_x - xpos)/10);//Math.ceil求最小的整数,但不小于本身
xpos = xpos + dist;
}
if (xpos > final_x) {
var dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
}
if (ypos < final_y) {
var dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
}
if (ypos > final_y) {
var dist = Math.ceil((ypos - final_y)/10);
ypos = ypos - dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat,interval);
}
function next(previousBtn,nextBtn,scrollID,highlightID) {
if(moveing) return;
moveing = true;
var vTop = parseInt($(scrollID).style.top);
var vLeft = parseInt($(scrollID).style.left);
if (vLeft <= -1776) return moveing=false;
if(vLeft == -1184) {
$(nextBtn).className = 'last_btn';
}
var finalLeft = vLeft - 684;
moveElement(scrollID,finalLeft,vTop,5);
$(previousBtn).className = 'previous';
var highLightList = $(highlightID).getElementsByTagName('span');
for (var i=0; i<highLightList.length; i++) {
if (highLightList[i].className == 'current') {
var currentNum = i;
}
}
highLightList[currentNum].className = '';
highLightList[currentNum+1].className = 'current';
}
function previous(previousBtn,nextBtn,scrollID,highlightID) {
if(moveing) return;
moveing = true;
var vTop = parseInt($(scrollID).style.top);
var vLeft = parseInt($(scrollID).style.left);
if (vLeft >= 0) return moveing=false;
if(vLeft == -684) {
$(previousBtn).className = 'first_btn';
}
var finalLeft = vLeft + 684;
moveElement(scrollID,finalLeft,vTop,5);
$(nextBtn).className = 'next';
var highLightList = $(highlightID).getElementsByTagName('span');
for (var i=0; i<highLightList.length; i++) {
if (highLightList[i].className == 'current') {
var currentNum = i;
}
}
highLightList[currentNum].className = '';
highLightList[currentNum-1].className = 'current';
}这两个js放在一个页面里的时候只能有一个能成功运行,求解救!!!
var sWidth = $("#focus").width();
var len = $("#focus ul li").length;
var index = 0;
var picTimer;
var btn = "<div class='btnBg'></div><div class='btn'>";
for(var i=0; i < len; i++) {
btn += "<span></span>";
}
btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
$("#focus").append(btn);
$("#focus .btnBg").css("opacity",0.5);
$("#focus .btn span").css("opacity",0.4).mouseenter(function() {
index = $("#focus .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");
$("#focus .preNext").css("opacity",0.2).hover(function() {
$(this).stop(true,false).animate({"opacity":"0.5"},300);
},function() {
$(this).stop(true,false).animate({"opacity":"0.2"},300);
});
$("#focus .pre").click(function() {
index -= 1;
if(index == -1) {index = len - 1;}
showPics(index);
});
$("#focus .next").click(function() {
index += 1;
if(index == len) {index = 0;}
showPics(index);
});
$("#focus ul").css("width",sWidth * (len));
$("#focus").hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(function() {
showPics(index);
index++;
if(index == len) {index = 0;}
},4000);
}).trigger("mouseleave");
function showPics(index) {
var nowLeft = -index*sWidth;
$("#focus ul").stop(true,false).animate({"left":nowLeft},300);
$("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300);
}
});var moveing = false;
function $(id) { return document.getElementById(id); }
function moveElement(elementID,final_x,final_y,interval) {
if (!document.getElementById) return false;
if (!document.getElementById(elementID)) return false;
var elem = document.getElementById(elementID);
if (elem.movement) {
clearTimeout(elem.movement);
}
if (!elem.style.left) {
elem.style.left = "0px";
}
if (!elem.style.top) {
elem.style.top = "0px";
}
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if (xpos == final_x && ypos == final_y) {
moveing=false;
return true;
}
if (xpos < final_x) {
var dist = Math.ceil((final_x - xpos)/10);//Math.ceil求最小的整数,但不小于本身
xpos = xpos + dist;
}
if (xpos > final_x) {
var dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
}
if (ypos < final_y) {
var dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
}
if (ypos > final_y) {
var dist = Math.ceil((ypos - final_y)/10);
ypos = ypos - dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat,interval);
}
function next(previousBtn,nextBtn,scrollID,highlightID) {
if(moveing) return;
moveing = true;
var vTop = parseInt($(scrollID).style.top);
var vLeft = parseInt($(scrollID).style.left);
if (vLeft <= -1776) return moveing=false;
if(vLeft == -1184) {
$(nextBtn).className = 'last_btn';
}
var finalLeft = vLeft - 684;
moveElement(scrollID,finalLeft,vTop,5);
$(previousBtn).className = 'previous';
var highLightList = $(highlightID).getElementsByTagName('span');
for (var i=0; i<highLightList.length; i++) {
if (highLightList[i].className == 'current') {
var currentNum = i;
}
}
highLightList[currentNum].className = '';
highLightList[currentNum+1].className = 'current';
}
function previous(previousBtn,nextBtn,scrollID,highlightID) {
if(moveing) return;
moveing = true;
var vTop = parseInt($(scrollID).style.top);
var vLeft = parseInt($(scrollID).style.left);
if (vLeft >= 0) return moveing=false;
if(vLeft == -684) {
$(previousBtn).className = 'first_btn';
}
var finalLeft = vLeft + 684;
moveElement(scrollID,finalLeft,vTop,5);
$(nextBtn).className = 'next';
var highLightList = $(highlightID).getElementsByTagName('span');
for (var i=0; i<highLightList.length; i++) {
if (highLightList[i].className == 'current') {
var currentNum = i;
}
}
highLightList[currentNum].className = '';
highLightList[currentNum-1].className = 'current';
}这两个js放在一个页面里的时候只能有一个能成功运行,求解救!!!
1,把下面的好个$换个名
2,或者1的里面$替换成jQuery
function f(id) { return document.getElementById(id); }
并且查找替换:把 "$(" 替换成 "f(" .
这样就可以了。
1,把后面第2个JS里的$换个名
2,或者第1个JS的里面$替换成jQuery