2014-01-10 58 views
0

嘿,我有滑块的JavaScript代码,我的代码在Internet Explorer中工作率为100%,但它不适用于Chrome或Firefox。我的javascript代码不能在Chrome和Firefox中工作

这是我的HTML代码 - >

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="styles/Style.css"/> 
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/earlyaccess/droidarabickufi.css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="scripts/JS.js"></script> 
</head> 
<body onload="slidermo0();"> 
    <form id="form1" runat="server"> 
    <div> 
     <div class="header"> 
      <div class="stmenu"> 
       <ul> 
        <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> 
        <li><img src="images/search.png"/><input type="text" /></li> 
        <li><a href="#">مرحبا</a></li> 
       </ul> 
      </div> 
      <img id="mainimg" src="sss.jpg" /> 
      <img id="logo" src="sss.jpg" /> 
     </div> 

     <div class="menu"> 
      <ul> 
       <li><a href="#">الصفحة الرئيسية</a></li> 
       <li><a href="#">رئيس المجلس</a></li> 
      </ul> 
     </div> 
     <div class="top"> 
     <div class="slider"> 
      <ul> 
       <li id="s1" onmouseover="slidermo1();" onmouseout="slidermou1();"><h1 id="s1txt">تأجيل محاكمة مرسي لجلسة 1 فبراير لتعذر نقله إلى مقر </h1></li> 
       <li id="s2" onmouseover="slidermo2();" onmouseout="slidermou2();"><h1 id="s2txt">تأجيل محاكمة مرسي لجلسة 1 فبراير لتعذر نقله </h1></li> 
       <li id="s3" onmouseover="slidermo3();" onmouseout="slidermou3();"><h1 id="s3txt"> محاكمة مرسي لجلسة 1 فبراير لتعذر نقله إلى مقر المحاكمة </h1></li> 
       <li id="s4" onmouseover="slidermo4();" onmouseout="slidermou4();"><h1 id="s4txt">تأجيل لجلسة 1 فبراير لتعذر نقله إلى مقر المحاكمة </h1></li> 
      </ul> 
      <div class="mimg"> 
       <img id="sim4" src="https://pbs.twimg.com/profile_images/378800000851647346/134bd91486fb1f3dcaf9a94929d08580.jpeg" /> 
       <img id="sim3" src="https://pbs.twimg.com/profile_images/3477392906/f1907df0bd76668deac4a5e31a22fbe7.jpeg" /> 
       <img id="sim2" src="https://pbs.twimg.com/profile_images/378800000777707394/262a47f6acb49b39a454e7f552ad5854.jpeg" /> 
       <img id="sim1" src="https://pbs.twimg.com/profile_images/378800000700068115/a218e2c8dde5b511417034dd5c04f01b.jpeg" /> 
      </div> 

      <div class="binfo"> 
       <h1 id="smtxt"></h1> 
       <p>كان اللواء أمين عز الدين، مساعد أول وزير الداخلية مدير أمن الإسكندرية، قد قال إنه «تعذر نقل الرئيس المعزول محمد مرسي إلى مقر محاكمته بأكاديمية ... </p> 
      </div> 
      <img id="arrow" src="images/arrow.png" /> 
     </div> 
      <div class="lnews"> 
       <div class="title"> 
        <span>اخر الاخبار</span> 
       </div> 
      </div> 

    </div> 
     </div> 
    </form> 
</body> 
</html> 

,这我的javascript代码===>

var timer = null; 
var myimg = "sim1"; 
var top = "sim2"; 

function imgslide() { 
    if (top != myimg) { 
     document.getElementById("sim1").style.opacity = "0"; 
     document.getElementById("sim2").style.opacity = "0"; 
     document.getElementById("sim3").style.opacity = "0"; 
     document.getElementById("sim4").style.opacity = "0"; 
     document.getElementById("sim1").style.zIndex = "0"; 
     document.getElementById("sim2").style.zIndex = "0"; 
     document.getElementById("sim3").style.zIndex = "0"; 
     document.getElementById("sim4").style.zIndex = "0"; 
     document.getElementById(top).style.opacity = "1"; 
     document.getElementById(top).style.zIndex = "1"; 
     document.getElementById(myimg).style.zIndex = "2"; 
     document.getElementById(myimg).style.opacity = "0"; 
     $("#" + myimg).animate({ opacity: "1" }, "slow"); 
    } 
} 
function slidermo0() { 
    myimg = "sim1"; 
    imgslide(); 
    top = "sim1"; 
    document.getElementById("arrow").style.top = "0px"; 
    $("#s1").addClass("liover"); 
    $("#s2").removeClass("liover"); 
    $("#s3").removeClass("liover"); 
    $("#s4").removeClass("liover"); 
    document.getElementById("smtxt").innerText = document.getElementById("s1txt").innerText; 
    timer = setTimeout(function() { slidermo2(); timer = setTimeout(function() { slidermo3(); timer = setTimeout(function() { slidermo4(); timer = setTimeout(function() { slidermo0() }, 3000); }, 3000); }, 3000); }, 3000); 
} 

function slidermo1() { 
    clearTimeout(timer); 
    myimg = "sim1"; 
    imgslide(); 
    top = "sim1"; 
    document.getElementById("smtxt").innerText = document.getElementById("s1txt").innerText; 
    document.getElementById("arrow").style.top = "0px"; 
    $("#s1").addClass("liover"); 
    $("#s2").removeClass("liover"); 
    $("#s3").removeClass("liover"); 
    $("#s4").removeClass("liover"); 
    document.getElementById("smtxt").innerText = document.getElementById("s1txt").innerText; 
} 

function slidermo2() { 
    clearTimeout(timer); 
    myimg = "sim2"; 
    imgslide(); 
    top = "sim2"; 
    document.getElementById("smtxt").innerText = document.getElementById("s2txt").innerText; 
    document.getElementById("arrow").style.top = "81px"; 
    $("#s2").addClass("liover"); 
    $("#s1").removeClass("liover"); 
    $("#s3").removeClass("liover"); 
    $("#s4").removeClass("liover"); 
} 

function slidermo3() { 
    clearTimeout(timer); 
    myimg = "sim3"; 
    imgslide(); 
    top = "sim3"; 
    document.getElementById("smtxt").innerText = document.getElementById("s3txt").innerText; 
    document.getElementById("arrow").style.top = "163px"; 
    $("#s3").addClass("liover"); 
    $("#s1").removeClass("liover"); 
    $("#s2").removeClass("liover"); 
    $("#s4").removeClass("liover"); 
} 

function slidermo4() { 
    clearTimeout(timer); 
    myimg = "sim4"; 
    imgslide(); 
    top = "sim4"; 
    document.getElementById("smtxt").innerText = document.getElementById("s4txt").innerText; 
    document.getElementById("arrow").style.top = "245px"; 
    $("#s4").addClass("liover"); 
    $("#s1").removeClass("liover"); 
    $("#s2").removeClass("liover"); 
    $("#s3").removeClass("liover"); 
} 

function slidermou1() { 
    slidermo0(); 
    myimg = "sim2"; 
} 

function slidermou2() { 
    timer = setTimeout(function() { slidermo3(); timer = setTimeout(function() { slidermo4(); timer = setTimeout(function() { slidermo0() }, 3000); }, 3000); }, 3000); 
    myimg = "sim3"; 
} 

function slidermou3() { 
    timer = setTimeout(function() { slidermo4(); timer = setTimeout(function() { slidermo0(); }, 3000); }, 3000); 
    myimg = "sim4"; 
} 

function slidermou4() { 
    timer = setTimeout(function() { slidermo0(); }, 3000); 
    myimg = "sim1"; 
} 

,这我的代码演示,只是看滑块 - > http://schools.org.il/Default2.aspx

我有我的问题寻找解决方案2天,但我没有找到它,任何一个可以帮助吗?!

+4

代码伤害我的眼睛:/ – Doorknob

+0

边注:使代码更混乱/古怪考虑使用'document.write'太:)...为什么你正在使用JQuery的这种随意的搭配和原始JavaScript代替CSS? –

回答

2

top保留关键字变量不能被覆盖。你不能使用它。

document.getElementById(top) 

这是一样的

document.getElementById(window.top) 

这是不

document.getElementById("sim2") //nope 

如你预期。

enter image description here

+1

它不是一个保留的_keyword_,而是一个受保护的'window'的_property_,并且因为'var top'出现在全局范围内,所以'var'没有任何作用,因为这个'top'仍然指向'window.top'它是不可写的。 –

+0

@ t.niese - 谢谢,你说得对。 –

+0

那我该怎么办?! – user3080555

相关问题