$(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放在一个页面里的时候只能有一个能成功运行,求解救!!!

解决方案 »

  1.   

    $ 变量名占用冲突了
    1,把下面的好个$换个名
    2,或者1的里面$替换成jQuery
      

  2.   

    把第2个function $(id) { return document.getElementById(id); } 这个改为
    function f(id) { return document.getElementById(id); }
    并且查找替换:把 "$(" 替换成 "f(" .
    这样就可以了。
      

  3.   

    $ 变量名占用冲突了
    1,把后面第2个JS里的$换个名
    2,或者第1个JS的里面$替换成jQuery