Javascript在Internet Explorer 11中不起作用

Question

我们的页面无法在Internet Explorer 11上正常工作，但出现了问题。但是，它在其他浏览器上也可以正常工作。

我们不知道如何解决这个问题，我们一直在互联网上研究如何解决此问题，但是找不到任何可以帮助的事情。

我们想知道是否有人可以帮助我们。

<!DOCTYPE html>
<head>
<title>Canon UST Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script> -->

    <!-- Add jQuery library -->
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script src="./jquery.reel.js" type="text/javascript"></script>
<script src="raphael.min.js" type="text/javascript"></script>
<script type="text/javascript" src="mainJ.js"></script>
<script src="jquery.event.move.js"></script>
<script src="jquery.twentytwenty.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<link rel="stylesheet" href="default.css">
<link href="jquery-ui.css" rel="stylesheet">
<link rel="stylesheet" href="twentytwenty.css">
<style type="text/css">
.forMidSec{width:100%; float: left; text-align: center;}
.marked {
    background: red; width: 20px;height: 20px;  
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    }

    #openDiv
    {
        z-index:99;
    }
    .AF
    {
        display:none;
    }

    .innerPages .inFP
    {
        display:none;
    }
    .commonHeader
    {
        visibility:hidden;
    }


</style>
</head>
<body>
<!---->
<div class="imainint">
    <div id = "imgwrap" class="imgwrapint">
        <div id="introimg" style="width:800px;height:670px;">

        </div>

    </div>
</div>
<!---->
<div class="progressBar">
<div class="progressImg"></div>
</div>
<div class="mainWrap">
<header class="mainHead">
<div class="wrapper clearfix modelName">
<div class="col1">
<ul class="top">
<li id ="mainli"><a href="#" class="mainBuy" title="Buy" target="_blank"><img src="buynow.png" alt="Buy Now" /></a></li>
</ul>
</div>
<div class="col3"><img src="logo_canon.png" width="70" height="15" alt="Canon"></div>
</div>

</header>

<div class="forMidSec">
<section class="wrapper clearfix h600">
<!--<span class="dtext">HTYU</span>-->
<div id="showImages">
<div id="view360wrapper">
        <!-- Image 360 Deg to show here -->
        <img src="360/1-1.jpg" name="view360" id="view360"/>
    </div></div>

    <div id="openDiv" style="display:none">
    <ul class="sub-menu">
    </ul>
   </div>


  <div id ="omni_arrow"><img src="omni-arrow.png" alt="omni-arrow" style="text-align:center"></div>

  </div>
  </section>
  </div>
 <div class="commonHeader"> 
    <header>
    <div class="wrapper clearfix modelName">
    <div class="col1">
    <ul class="top">
    <li><a href="#" class="commonBack" title="Back"><img src="back.gif" alt="Back"></a></li>
    <li id = "buyLi"><a href="#" class="buyLink" title="Buy" target="_blank"><img src="buynow.png" alt="Buy Now"></a></li>
    <li class="compareBtn"><a href="javascript:void(0)" class="cmpTxt" title="Compare">Compare</a></li>
    </ul>
    </div>
    <div class="col2">
<ul class="top">
<li></li>
<li><a href="javascript:void(0)" class="openFeatureBox" title="Specifications"><img class="featureImg" src="" alt=""></a><a href="javascript:void(0)"> <img src="specifications.gif" alt="Specifications" class="featureSpecs"></a></li>
</ul>
</div>
    <div class="col3"><img src="logo_canon.png" width="70" height="15" alt="Canon"></div>
    </div>

    </header>
 </div>
 <div class="innerPages">

 <div id="openCompare" class="compare-overlay">
<div class="compare-open">
<div class="compare-arrow"></div>
<a title="Close" href="javascript:void(0)" class="compare-close"></a>
<div class="compare-inner">
<div class="compare-innerTop">

</div>
<div class="compare-innerBottom">

</div>
</div>
</div>
</div>

<div id="openFeatures" class="features-overlay">
<div class="features-open">
<div class="features-arrow"></div>
<a title="Close" href="javascript:void(0)" class="features-close"></a>
<div class="features-inner">

<p>Language Text</p>
</div>
</div>
</div> 

<!-- Start of auto focus Images --> 
 <div class="AF inFP">
<section class="wrapper clearfix bgcol3 h600">
  <div class="wrapper clearfix bgcol1">
    <div class="hotspot-gallery">  
        <div class="big-image"></div>
         <div class="hotSpotImg"></div>  
    </div>
    </div>
</section>
  </div>
 <!-- End of auto focus Images --> 

 <!-- Start of video Page -->
 <div class="videoContainer inFP">
 <section class="wrapper clearfix bgcol1 h600">
 <div class="progressBar">
    <div class="progressImg"></div>
</div>
<div class="vid">
<video width="640"  id="eosVid" height="360" controls>
  <source src="" type="video/mp4">
    Your browser does not support the video tag.
</video>
</div>
</section>
</div>
 <!-- End Of Video page -->

 <!-- Start of Overlap feature -->
 <div class="overlapContainer inFP">
 <section class="wrapper clearfix h600">
 <div class="overlapCont"></div>

</section> 
</div>
 <!-- End of Overlap feature -->

  <!-- Start of HDR Gallery feature -->
 <div class="hdrGalCont inFP">
 <section class="wrapper clearfix bgcol3 h600">
       <div id="openEnlargeImg" class="EnlargeImg-overlay">
            <div class="EnlargeImg-open">
            <a title="Close" href="javascript:void(0)" onclick="document.getElementById('openEnlargeImg').style.display='none'" class="EnlargeImg-close"></a>
            <div class="EnlargeImg-inner">
            <img src="EOS 70D - HDR - Normal Exposure.jpg" /> </div>
            </div>
        </div>
        <div class="image-gallery">
           <div class="enlargeIcon filterImg"><a href="javascript:void(0)"><img src="fullbutton.png"></a></div>
           <div class="big-image">           
           </div>  

          <div class="captionTxt"></div>

         <div class="thumbs">  
         <ul>    

         </ul>
         </div>

</div>
 </section>  
</div>
 <!-- End of Hdr Gallery feature -->

 <!-- Start of Filter Gallery feature -->
 <div class="filterGal inFP">
 <div id="openEnlargeImg1" class="EnlargeImg-overlay">
            <div class="EnlargeImg-open">
            <a title="Close" href="javascript:void(0)" onclick="document.getElementById('openEnlargeImg1').style.display='none'" class="EnlargeImg-close"></a>
            <div class="EnlargeImg-inner">
            <img src="EOS 70D - HDR - Normal Exposure.jpg" /> </div>
            </div>
        </div>

 <section class="wrapper clearfix bgcol1">
     <div class="imgWrapper filterGalFlow"></div>    
</section>   
</div>
 <!-- End of Filter Gallery feature -->

  <!-- Start of MultiExpo  feature -->
 <div class="MultiExposure inFP">
 <section class="wrapper clearfix h600">
      <div class="multipleExpo"><img src="" alt="Multiple Exposure" style="max-width:800px; height:auto"></div>     
</section>
      </div>
 <!-- End of MultiExpo feature -->

 <div class="frameSlier inFP">

<div class="slide-img">
    <div id="cycler" class="eagleSlide">
    <!--<img class="active" src="" alt="My image" />    
    <img src="" alt="My image" />   
    <img src="" alt="My image" />
    <img src="" alt="My image" />
    <img src="" alt="My image" />
    <img src="" alt="My image" />
    <img src="" alt="My image" />
    <img src="" alt="My image" />
    <img src="" alt="My image" />
    <img src="" alt="My image" /> -->
   </div>

   <div class="sliderBg">
   <div id="slider">

   </div>
   </div>
</div>   

 </div><!-- End of Frame Slider-->

 <!-- Start of HdrSlider -->
 <div class="hdrSlider inFP">

    <div class="slide-img">
   <div id="cycler2">
    <img class="active" src="" alt="My image" />    
    <img src="" alt="My image" />   
    <img src="" alt="My image" />
   </div>

   <div id="slider2Up">
   <div id="slider2">

   </div>
   </div>
</div> 
 </div><!-- End Of hdr Slider-->

 <!-- Start of zoom slider -->
 <div class="zoomSlider inFP">
        <div class="slide-img">
   <div id="cycler3">

   </div>

   <div id="slider3Up">
   <div id="slider3">

   </div>
   </div>
</div>  
 </div>
<!-- End of zoom slider -->

<!-- Start of Dual Slider -->
<div class="dualSlid inFP">
<div class="slide-img dualSlideImg">


</div>

<div style="width:800px; height:auto; display:table; margin:-80px auto  0; padding:0; position:relative">   

   <div style="width:49%; display:table-cell">
   <div id="slider5Up">
   <div id="slider5"></div>
   </div>
   </div>

   <div style="width:49%; display:table-cell">
   <div id="slider4Up">
   <div id="slider4">

   </div>
   </div>

   </div>

</div>

</div>
<!-- End of dual Slider-->

</div> 
    <div id="clickLinks"></div>
    <div id="videoPlayer"></div>
    <div id="staticImageViewer"></div>
</body>
</html>