网站3个js文件冲突要如何解决

[coency]

第一个：

网站前站HTML代码：
<div id="ifocus">
<div style="overflow: hidden" id="ifocus_pic">
<div style="overflow: hidden; top:0px; left:0px;" id="ifocus_piclist">
<ul>
<li><a href="#"><img src="images/bar1.jpg" width="962"height="275" alt="" /></a></li>
<li><a href="#"><img src="images/bar2.jpg" width="962"height="275" alt="" /></a></li>
<li><a href="#"><img src="images/bar3.jpg" width="962"height="275" alt="" /></a></li>
<li><a href="#"><img src="images/bar4.jpg" width="962"height="275" alt="" /></a></li>
<li><a href="#"><img src="images/bar5.jpg" width="962"height="275" alt="" /></a></li>
</ul>
</div>
<div id="ifocus_opdiv"></div>
<div id="ifocus_tx">
<ul>
<li class="current"></li>
<li class="normal"></li>
<li class="normal"></li>
<li class="normal"></li>
<li class="normal"></li>
</ul>
</div>
<div id="ifocus_btn">
<ul>
<li class="current"><img src="images/bar1.jpg" width="962"height="275" alt=""></li>
<liclass="normal"><img src="images/bar2.jpg" width="962"height="275" alt=""></li>
<liclass="normal"><img src="images/bar3.jpg" width="962"height="275" alt=""></li>
<liclass="normal"><img src="images/bar4.jpg" width="962"height="275" alt=""></li>
<liclass="normal"><img src="images/bar5.jpg" width="962"height="275" alt=""></li>
</ul>
</div>
</div>
</div>

外部调用JS代码：
function $(id) { return document.getElementById(id); }

function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}
}

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) {
return true;
}
if (xpos < final_x) {
var dist = Math.ceil((final_x - xpos)/10);
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 classNormal(iFocusBtnID,iFocusTxID){
var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
for(var i=0; i<iFocusBtns.length; i++) {
iFocusBtns.className='normal';
iFocusTxs.className='normal';
}
}

function classCurrent(iFocusBtnID,iFocusTxID,n){
var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
iFocusBtns[n].className='current';
iFocusTxs[n].className='current';
}

function iFocusChange() {
if(!$('ifocus')) return false;
$('ifocus').onmouseover = function(){atuokey = true};
$('ifocus').onmouseout = function(){atuokey = false};
var iFocusBtns = $('ifocus_btn').getElementsByTagName('li');
var listLength = iFocusBtns.length;
iFocusBtns[0].onmouseover = function() {
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
}
if (listLength>=2) {
iFocusBtns[1].onmouseover = function() {
moveElement('ifocus_piclist',0,-275,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',1);
}
}
if (listLength>=3) {
iFocusBtns[2].onmouseover = function() {
moveElement('ifocus_piclist',0,-550,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',2);
}
}
if (listLength>=4) {
iFocusBtns[3].onmouseover = function() {
moveElement('ifocus_piclist',0,-825,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',3);
}
}
if (listLength>=5) {
iFocusBtns[4].onmouseover = function() {
moveElement('ifocus_piclist',0,-1100,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',4);
}
}
}

setInterval('autoiFocus()',5000);
var atuokey = false;
function autoiFocus() {
if(!$('ifocus')) return false;
if(atuokey) return false;
var focusBtnList = $('ifocus_btn').getElementsByTagName('li');
var listLength = focusBtnList.length;
for(var i=0; i<listLength; i++) {
if (focusBtnList.className == 'current') var currentNum = i;
}
if (currentNum==0&&listLength!=1 ){
moveElement('ifocus_piclist',0,-275,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',1);
}
if (currentNum==1&&listLength!=2 ){
moveElement('ifocus_piclist',0,-550,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',2);
}
if (currentNum==2&&listLength!=3 ){
moveElement('ifocus_piclist',0,-825,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',3);
}
if (currentNum==3&&listLength!=4 ){
moveElement('ifocus_piclist',0,-1100,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',4);
}
if (currentNum==4 ){
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
}
if (currentNum==1&&listLength==2 ){
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
}
if (currentNum==2&&listLength==3 ){
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
}
if (currentNum==3&&listLength==4 ){
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
}
}
addLoadEvent(iFocusChange);

[coency]

引用 7 楼 xiaofanku 的回复:

这三个特效在同一页面出现吗

嗯，是的，都在一个页面里

[coency]

引用 8 楼 ftiger 的回复:

$冲突啊。 简单的方法是将前两个用 (funciton(){ //代码在这里 })(); 封起来。 良好的做法是前两个用jq重写，可以简化比较多的代码。

不好意思啊，我对JS不是很熟悉，请问要具体要怎么写

[coency]

第二个： 网站前站HTML代码： <div class="container" id="idTransformView"> <ul class="slider" id="idSlider"> <li><img src="images/case1.jpg"/></li> <li><img src="images/case2.jpg"/></li> <li><img src="images/case3.jpg"/></li> <li><img src="images/case4.jpg"/></li> </ul> <ul class="num" id="idNum"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> 外部调用JS代码： var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } Object.extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } var TransformView = Class.create(); TransformView.prototype = { //容器对象,滑动对象,切换参数,切换数量 initialize: function(container, slider, parameter, count, options) { if(parameter <= 0 || count <= 0) return; var oContainer = $(container), oSlider = $(slider), oThis = this; this.Index = 0;//当前索引 this._timer = null;//定时器 this._slider = oSlider;//滑动对象 this._parameter = parameter;//切换参数 this._count = count || 0;//切换数量 this._target = 0;//目标参数 this.SetOptions(options); this.Up = !!this.options.Up; this.Step = Math.abs(this.options.Step); this.Time = Math.abs(this.options.Time); this.Auto = !!this.options.Auto; this.Pause = Math.abs(this.options.Pause); this.onStart = this.options.onStart; this.onFinish = this.options.onFinish; oContainer.style.overflow = "hidden"; oContainer.style.position = "relative"; oSlider.style.position = "absolute"; oSlider.style.top = oSlider.style.left = 0; }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Up: true,//是否向上(否则向左) Step: 5,//滑动变化率 Time: 10,//滑动延时 Auto: true,//是否自动转换 Pause: 2000,//停顿时间(Auto为true时有效) onStart: function(){},//开始转换时执行 onFinish: function(){}//完成转换时执行 }; Object.extend(this.options, options || {}); }, //开始切换设置 Start: function() { if(this.Index < 0){ this.Index = this._count - 1; } else if (this.Index >= this._count){ this.Index = 0; } this._target = -1 * this._parameter * this.Index; this.onStart(); this.Move(); }, //移动 Move: function() { clearTimeout(this._timer); var oThis = this, style = this.Up ? "top" : "left", iNow = parseInt(this._slider.style[style]) || 0, iStep = this.GetStep(this._target, iNow); if (iStep != 0) { this._slider.style[style] = (iNow + iStep) + "px"; this._timer = setTimeout(function(){ oThis.Move(); }, this.Time); } else { this._slider.style[style] = this._target + "px"; this.onFinish(); if (this.Auto) { this._timer = setTimeout(function(){ oThis.Index++; oThis.Start(); }, this.Pause); } } }, //获取步长 GetStep: function(iTarget, iNow) { var iStep = (iTarget - iNow) / this.Step; if (iStep == 0) return 0; if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1); return iStep; }, //停止 Stop: function(iTarget, iNow) { clearTimeout(this._timer); this._slider.style[this.Up ? "top" : "left"] = this._target + "px"; } }; window.onload=function(){ function Each(list, fun){ for (var i = 0, len = list.length; i < len; i++) { fun(list, i); } }; var objs = $("idNum").getElementsByTagName("li"); var tv = new TransformView("idTransformView", "idSlider", 170, 4, { onStart : function(){ Each(objs, function(o, i){ o.className = tv.Index == i ? "on" : ""; }) }//按钮样式 }); tv.Start(); Each(objs, function(o, i){ o.onmouseover = function(){ o.className = "on"; tv.Auto = false; tv.Index = i; tv.Start(); } o.onmouseout = function(){ o.className = ""; tv.Auto = true; tv.Start(); } }) //test2 var objs2 = $("idNum2").getElementsByTagName("li"); var tv2 = new TransformView("idTransformView2", "idSlider2", 408, 4, { onStart: function(){ Each(objs2, function(o, i){ o.className = tv2.Index == i ? "on" : ""; }) },//按钮样式 Up: false }); tv2.Start(); Each(objs2, function(o, i){ o.onmouseover = function(){ o.className = "on"; tv2.Auto = false; tv2.Index = i; tv2.Start(); } o.onmouseout = function(){ o.className = ""; tv2.Auto = true; tv2.Start(); } }) $("idStop").onclick = function(){ tv2.Auto = false; tv2.Stop(); } $("idStart").onclick = function(){ tv2.Auto = true; tv2.Start(); } $("idNext").onclick = function(){ tv2.Index++; tv2.Start(); } $("idPre").onclick = function(){ tv2.Index--;tv2.Start(); } $("idFast").onclick = function(){ if(--tv2.Step <= 0){tv2.Step = 1;} } $("idSlow").onclick = function(){ if(++tv2.Step >= 10){tv2.Step = 10;} } $("idReduce").onclick = function(){ tv2.Pause-=1000; if(tv2.Pause <= 0){tv2.Pause = 0;} } $("idAdd").onclick = function(){ tv2.Pause+=1000; if(tv2.Pause >= 5000){tv2.Pause = 5000;} } $("idReset").onclick = function(){ tv2.Step = Math.abs(tv2.options.Step); tv2.Time = Math.abs(tv2.options.Time); tv2.Auto = !!tv2.options.Auto; tv2.Pause = Math.abs(tv2.options.Pause); } }

[coency]

第三个： 网站前台HTML代码： <div class="box"> <div class="picbox"> <ul class="piclist mainlist"> <li><a href="#"><img src="images/1.jpg" /></a><a href="#" class="boxA">发泡水泥保温板</a></li> <li><a href="#"><img src="images/2.jpg" /></a><a href="#" class="boxA">发泡水泥保温板</a></li> <li><a href="#"><img src="images/3.jpg" /></a><a href="#" class="boxA">发泡水泥保温板</a></li> <li><a href="#"><img src="images/4.jpg" /></a><a href="#" class="boxA">发泡水泥保温板</a></li> <li><a href="#"><img src="images/5.jpg" /></a><a href="#" class="boxA">发泡水泥保温板</a></li> <li><a href="#"><img src="images/6.jpg" /></a><a href="#" class="boxA">发泡水泥保温板</a></li> <li><a href="#"><img src="images/7.jpg" /></a><a href="#" class="boxA">发泡水泥保温板</a></li> <li><a href="#"><img src="images/8.jpg" /></a><a href="#" class="boxA">发泡水泥保温板</a></li> </ul> <ul class="piclist swaplist"></ul> </div> <div class="og_prev"></div> <div class="og_next"></div> </div> 外部调用JS代码： // JavaScript Document $(document).ready(function(e) { /***不需要自动滚动，去掉即可***/ time = window.setInterval(function(){ $('.og_next').click(); },5000); /***不需要自动滚动，去掉即可***/ linum = $('.mainlist li').length;//图片数量 w = linum * 250;//ul宽度 $('.piclist').css('width', w + 'px');//ul宽度 $('.swaplist').html($('.mainlist').html());//复制内容 $('.og_next').click(function(){ if($('.swaplist,.mainlist').is(':animated')){ $('.swaplist,.mainlist').stop(true,true); } if($('.mainlist li').length>4){//多于4张图片 ml = parseInt($('.mainlist').css('left'));//默认图片ul位置 sl = parseInt($('.swaplist').css('left'));//交换图片ul位置 if(ml<=0 && ml>w*-1){//默认图片显示时 $('.swaplist').css({left: '1000px'});//交换图片放在显示区域右侧 $('.mainlist').animate({left: ml - 1000 + 'px'},'slow');//默认图片滚动 if(ml==(w-1000)*-1){//默认图片最后一屏时 $('.swaplist').animate({left: '0px'},'slow');//交换图片滚动 } }else{//交换图片显示时 $('.mainlist').css({left: '1000px'})//默认图片放在显示区域右 $('.swaplist').animate({left: sl - 1000 + 'px'},'slow');//交换图片滚动 if(sl==(w-1000)*-1){//交换图片最后一屏时 $('.mainlist').animate({left: '0px'},'slow');//默认图片滚动 } } } }) $('.og_prev').click(function(){ if($('.swaplist,.mainlist').is(':animated')){ $('.swaplist,.mainlist').stop(true,true); } if($('.mainlist li').length>4){ ml = parseInt($('.mainlist').css('left')); sl = parseInt($('.swaplist').css('left')); if(ml<=0 && ml>w*-1){ $('.swaplist').css({left: w * -1 + 'px'}); $('.mainlist').animate({left: ml + 1000 + 'px'},'slow'); if(ml==0){ $('.swaplist').animate({left: (w - 1000) * -1 + 'px'},'slow'); } }else{ $('.mainlist').css({left: (w - 1000) * -1 + 'px'}); $('.swaplist').animate({left: sl + 1000 + 'px'},'slow'); if(sl==0){ $('.mainlist').animate({left: '0px'},'slow'); } } } }) }); $(document).ready(function(){ $('.og_prev,.og_next').hover(function(){ $(this).fadeTo('fast',1); },function(){ $(this).fadeTo('fast',0.7); }) }) （还有一个通用的JS文件 我就不写出来了） 网站里有这3个外部调用的JS文件，但是只有第三个JS是正常运行的，第一个和第二个无法正常运行，请问要如何解决？ 备注：PHP初学者，对于JS文件的完全是菜鸟级别，一点也不懂，希望各位大神可以帮我看下，在些万分感激不尽~~~

[街头小贩]

是让我们把第三个效果改成javascript版的?

[coency]

引用 3 楼 xiaofanku 的回复:

是让我们把第三个效果改成javascript版的?

第三个好像是JQuery文件，因为还有一个通用的jquery.js文件，也就是说第三个的效果需要乃至这2个JS文件。

[街头小贩]

第三个和前两个只要不在同一个连接地址中出现也没问题

[coency]

引用 5 楼 xiaofanku 的回复:

第三个和前两个只要不在同一个连接地址中出现也没问题

不好意思啊，我不是很明白，要怎么才能让这3个JS正常运行

[街头小贩]

这三个特效在同一页面出现吗

[ftiger]

$冲突啊。 简单的方法是将前两个用 (funciton(){ //代码在这里 })(); 封起来。 良好的做法是前两个用jq重写，可以简化比较多的代码。

[来自地狱]

模块化写JS吧 就不会冲突哦

[默默不得鱼]

第一个JS改成这样 用块包起来(function(){ //之前的代码 })()

(function(){
function $(id) { return document.getElementById(id); }

function addLoadEvent(func){
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function(){
            oldonload();
            func();
        }
    }
}

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) {
        return true;
  }
  if (xpos < final_x) {
    var dist = Math.ceil((final_x - xpos)/10);
    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 classNormal(iFocusBtnID,iFocusTxID){
    var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
    var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
    for(var i=0; i<iFocusBtns.length; i++) {
        iFocusBtns.className='normal';
        iFocusTxs.className='normal';
    }
}

function classCurrent(iFocusBtnID,iFocusTxID,n){
    var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
    var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
    iFocusBtns[n].className='current';
    iFocusTxs[n].className='current';
}

function iFocusChange() {
    if(!$('ifocus')) return false;
    $('ifocus').onmouseover = function(){atuokey = true};
    $('ifocus').onmouseout = function(){atuokey = false};
    var iFocusBtns = $('ifocus_btn').getElementsByTagName('li');
    var listLength = iFocusBtns.length;
    iFocusBtns[0].onmouseover = function() {
        moveElement('ifocus_piclist',0,0,5);
        classNormal('ifocus_btn','ifocus_tx');
        classCurrent('ifocus_btn','ifocus_tx',0);
    }
    if (listLength>=2) {
        iFocusBtns[1].onmouseover = function() {
            moveElement('ifocus_piclist',0,-275,5);
            classNormal('ifocus_btn','ifocus_tx');
            classCurrent('ifocus_btn','ifocus_tx',1);
        }
    }
    if (listLength>=3) {
        iFocusBtns[2].onmouseover = function() {
            moveElement('ifocus_piclist',0,-550,5);
            classNormal('ifocus_btn','ifocus_tx');
            classCurrent('ifocus_btn','ifocus_tx',2);
        }
    }
    if (listLength>=4) {
        iFocusBtns[3].onmouseover = function() {
            moveElement('ifocus_piclist',0,-825,5);
            classNormal('ifocus_btn','ifocus_tx');
            classCurrent('ifocus_btn','ifocus_tx',3);
        }
    }
    if (listLength>=5) {
        iFocusBtns[4].onmouseover = function() {
            moveElement('ifocus_piclist',0,-1100,5);
            classNormal('ifocus_btn','ifocus_tx');
            classCurrent('ifocus_btn','ifocus_tx',4);
        }
    }
}

setInterval('autoiFocus()',5000);
var atuokey = false;
function autoiFocus() {
    if(!$('ifocus')) return false;
    if(atuokey) return false;
    var focusBtnList = $('ifocus_btn').getElementsByTagName('li');
    var listLength = focusBtnList.length;
    for(var i=0; i<listLength; i++) {
        if (focusBtnList.className == 'current') var currentNum = i;
    }
    if (currentNum==0&&listLength!=1 ){
        moveElement('ifocus_piclist',0,-275,5);
        classNormal('ifocus_btn','ifocus_tx');
        classCurrent('ifocus_btn','ifocus_tx',1);
    }
    if (currentNum==1&&listLength!=2 ){
        moveElement('ifocus_piclist',0,-550,5);
        classNormal('ifocus_btn','ifocus_tx');
        classCurrent('ifocus_btn','ifocus_tx',2);
    }
    if (currentNum==2&&listLength!=3 ){
        moveElement('ifocus_piclist',0,-825,5);
        classNormal('ifocus_btn','ifocus_tx');
        classCurrent('ifocus_btn','ifocus_tx',3);
    }
    if (currentNum==3&&listLength!=4 ){
        moveElement('ifocus_piclist',0,-1100,5);
        classNormal('ifocus_btn','ifocus_tx');
        classCurrent('ifocus_btn','ifocus_tx',4);
    }
    if (currentNum==4 ){
        moveElement('ifocus_piclist',0,0,5);
        classNormal('ifocus_btn','ifocus_tx');
        classCurrent('ifocus_btn','ifocus_tx',0);
    }
    if (currentNum==1&&listLength==2 ){
        moveElement('ifocus_piclist',0,0,5);
        classNormal('ifocus_btn','ifocus_tx');
        classCurrent('ifocus_btn','ifocus_tx',0);
    }
    if (currentNum==2&&listLength==3 ){
        moveElement('ifocus_piclist',0,0,5);
        classNormal('ifocus_btn','ifocus_tx');
        classCurrent('ifocus_btn','ifocus_tx',0);
    }
    if (currentNum==3&&listLength==4 ){
        moveElement('ifocus_piclist',0,0,5);
        classNormal('ifocus_btn','ifocus_tx');
        classCurrent('ifocus_btn','ifocus_tx',0);
    }
}
addLoadEvent(iFocusChange);
})()