不兼容的JavaScripts

时间：2015-01-05 01:11:23

标签： javascript jquery html5

在网站中，我添加了自定义Google地图和自定义幻灯片。

这是HTML文件：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>Polideportivo Los Cedros</title>
            <link href="styles.css" rel="stylesheet" type="text/css">

            <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
            <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
            <script type="text/javascript">
                function initialize() {
                    var latlng = new google.maps.LatLng(40.427917, -3.657941);
                    var settings = {
                        zoom: 15,
                        center: latlng,
                        mapTypeControl: true,
                        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
                        navigationControl: true,
                        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    }

                    var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
                    var companyPos = new google.maps.LatLng(40.427288, -3.657919);
                    var companyMarker = new google.maps.Marker({
                        position: companyPos,
                        map: map,
                        title:"Some title"
                    })
                ;}
            </script>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
            <script src="http://malsup.github.io/jquery.cycle2.js"></script>
        </head>

        <body onload="initialize()">
            <div id="background">
                <div id="Base"><img src="images/Base.png"></div>
                <div id="graficotiempo"><!-- www.TuTiempo.net - Ancho:324px - Alto:70px -->
                <div id="TT_RCZkE1E1kSQDnshK7fzzzDDzDKUKTKrlLd1YEsy5Kkz"><a href="http://www.tutiempo.net/Tiempo-Madrid-E28001.html">El Tiempo en Madrid</a></div>
                <script type="text/javascript" src="http://www.tutiempo.net/widget/eltiempo_RCZkE1E1kSQDnshK7fzzzDDzDKUKTKrlLd1YEsy5Kkz"></script>
            </div>
            <div id="googlePlano">
                <div id="map_canvas" style="width:195px; height:132px"></div>
            </div>
            <div id="Capaslide">
                <div id="flip" class="cycle-slideshow" 
                    data-cycle-fx='flipVert' 
                    data-cycle-auto-height="4:3"
                    data-cycle-delay="400"
                    data-cycle-timeout="4000" >

                    <img src="slide_inicial/silde1.jpg" class=first data-cycle-fx=flipVert>
                    <img src="slide_inicial/silde2.jpg" class=first data-cycle-fx=flipVert>
                    <img src="slide_inicial/silde3.jpg" class=first data-cycle-fx=flipVert>
                    <img src="slide_inicial/silde4.jpg" class=first data-cycle-fx=flipVert>

                    <img src="slide_inicial/silde5.jpg" class=first data-cycle-fx=flipVert>
                    <img src="slide_inicial/silde6.jpg" class=first data-cycle-fx=flipVert>
                    <img src="slide_inicial/silde7.jpg" class=first data-cycle-fx=flipVert>
                    <img src="slide_inicial/silde8.jpg" class=first data-cycle-fx=flipVert>
                    <img src="slide_inicial/silde9.jpg" class=first data-cycle-fx=flipVert>
                </div>
            </div>
            <div id="mail"><a href="mailto:info@polideportivoloscedros.es"><img src="images/mail.png" ></a></div>
            <div id="tw"><img src="images/tw.png" onmouseover="this.src='images/twitter_realce.png'" 
onmouseout="this.src='images/tw.png'"></div>
            <div id="facebook"><img src="images/facebook.png" onmouseover="this.src='images/facebook_realce.png'" onmouseout="this.src='images/facebook.png'"></div>
            <div id="logohome"><img src="images/logohome.png"></div>
            <div id="logoclubsuperior"><a href="club.html"><img src="images/logoclubsuperior.png" onmouseover="this.src='images/6.png'" onmouseout="this.src='images/logoclubsuperior.png'"></a></div>
            <div id="logopiscinasuperior"><img src="images/logopiscinasuperior.png" onmouseover="this.src='images/5.png'" onmouseout="this.src='images/logopiscinasuperior.png'"></div>
            <div id="logotenissuperior"><img src="images/logotenissuperior.png" onmouseover="this.src='images/4.png'" onmouseout="this.src='images/logotenissuperior.png'"></div>
            <div id="logopadelsuperior"><img src="images/logopadelsuperior.png" onmouseover="this.src='images/3.png'" onmouseout="this.src='images/logopadelsuperior.png'"></div>
            <div id="logofitnesssuperior"><img src="images/logofitnesssuperior.png" onmouseover="this.src='images/2.png'" onmouseout="this.src='images/logofitnesssuperior.png'"></div>
            <div id="logootrossuperior"><img src="images/logootrossuperior.png" onmouseover="this.src='images/1.png'" onmouseout="this.src='images/logootrossuperior.png'"></div>
        </div>
     </body>
     </html>

问题是所包含的自定义Google地图应该是可选择的，这意味着用户应该能够点击地图并移动它并放大并缩小它。在包含幻灯片放映后，地图不再可选。

这些是显示幻灯片放映的行：

<div id="flip" class="cycle-slideshow" 
    data-cycle-fx='flipVert' 
    data-cycle-auto-height="4:3"
    data-cycle-delay="400"
    data-cycle-timeout="4000"
    >
    <img src="slide_inicial/silde1.jpg" class=first data-cycle-fx=flipVert>
    <img src="slide_inicial/silde2.jpg" class=first data-cycle-fx=flipVert>
    <img src="slide_inicial/silde3.jpg" class=first data-cycle-fx=flipVert>
    <img src="slide_inicial/silde4.jpg" class=first data-cycle-fx=flipVert>

    <img src="slide_inicial/silde5.jpg" class=first data-cycle-fx=flipVert>
    <img src="slide_inicial/silde6.jpg" class=first data-cycle-fx=flipVert>
    <img src="slide_inicial/silde7.jpg" class=first data-cycle-fx=flipVert>
    <img src="slide_inicial/silde8.jpg" class=first data-cycle-fx=flipVert>
    <img src="slide_inicial/silde9.jpg" class=first data-cycle-fx=flipVert>
</div>

幻灯片放映工作正常，但插入前一行后，地图会显示但无法选择。如果我删除前面的行，则可以再次选择地图。

我无法检测到问题的根源。

2 个答案:

答案 0 :(得分：2)

也许你错过了＃34; ＆＃34;在代码的开头。在较低的区域 试试这个：

<div id="flip" class="cycle-slideshow" 
data-cycle-fx='flipVert' 
data-cycle-auto-height="4:3"
data-cycle-delay="400"
data-cycle-timeout="4000"
>
<img src="slide_inicial/silde1.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde2.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde3.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde4.jpg" class=first data-cycle-fx=flipVert>

<img src="slide_inicial/silde5.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde6.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde7.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde8.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde9.jpg" class=first data-cycle-fx=flipVert>
</div>

答案 1 :(得分：1)

根据请求，这是我桌面上使用firefox的缩减代码（从剪切粘贴错误编辑）：

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>XZZZZZZZXXXXXXZZZZZZZZ</title>
  <!-- <link href="styles.css" rel="stylesheet" type="text/css"> -->
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

  <script type="text/javascript"
          src="http://maps.google.com/maps/api/js?sensor=false">
  </script>

  <script type="text/javascript">
   function initialize() {
    var latlng = new google.maps.LatLng(40.427917, -3.657941);
    var settings = {
     zoom: 15,
     center: latlng,
     mapTypeControl: true,
     mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
     navigationControl: true,
     navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
     mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
    var companyPos = new google.maps.LatLng(40.427288, -3.657919);
    var companyMarker = new google.maps.Marker({
      position: companyPos,
      map: map,
      title:"Some title"
    });
   }
  </script>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

  <script src="http://malsup.github.io/jquery.cycle2.js"></script>

 </head>

 <body onload="initialize()">
  <div id="background">
   <div id="Base"><img src="images/Base.png"></div>
   <div id="graficotiempo"><!-- www.TuTiempo.net - Ancho:324px - Alto:70px -->
    <div id="TT_RCZkE1E1kSQDnshK7fzzzDDzDKUKTKrlLd1YEsy5Kkz">
     <!-- <a href="http://www.tutiempo.net/Tiempo-Madrid-E28001.html">El Tiempo en Madrid</a> -->
    </div>
    <!-- <script type="text/javascript"
            src="http://www.tutiempo.net/widget/eltiempo_RCZkE1E1kSQDnshK7fzzzDDzDKUKTKrlLd1YEsy5Kkz"> </script> -->
    </div>
    <div id="googlePlano">
      <div id="map_canvas" style="width:195px; height:132px">
    </div>
   </div>
   <div id="Capaslide">
    <div id=flip class="cycle-slideshow"
         data-cycle-fx='fade'
         data-cycle-auto-height="4:3"
         data-cycle-delay="400"
         data-cycle-timeout="4000">
     <img src="slide_inicial/silde1.jpg" class=first data-cycle-fx=fade />
     <img src="slide_inicial/silde2.jpg" class=first data-cycle-fx=fade />
     <img src="slide_inicial/silde3.jpg" class=first data-cycle-fx=fade />
     <img src="slide_inicial/silde4.jpg" class=first data-cycle-fx=fade />
     <img src="slide_inicial/silde5.jpg" class=first data-cycle-fx=fade />
     <img src="slide_inicial/silde6.jpg" class=first data-cycle-fx=fade />
     <img src="slide_inicial/silde7.jpg" class=first data-cycle-fx=fade />
     <img src="slide_inicial/silde8.jpg" class=first data-cycle-fx=fade />
     <img src="slide_inicial/silde9.jpg" class=first data-cycle-fx=fade />
    </div>
   </div>
   <div id="mail">
    <a href="mailto:info@polideportivoloscedros.es">
     <img src="images/mail.png" />
    </a>
   </div>
   <div id="tw">
    <img src="images/tw.png"
         onmouseover="this.src='images/twitter_realce.png'"
         onmouseout="this.src='images/tw.png'" />
   </div>
   <div id="facebook">
    <img src="images/facebook.png"
         onmouseover="this.src='images/facebook_realce.png'"
         onmouseout="this.src='images/facebook.png'" />
   </div>
   <div id="logohome"><img src="images/logohome.png" /></div>
   <div id="logoclubsuperior">
    <a href="club.html">
     <img src="images/logoclubsuperior.png"
          onmouseover="this.src='images/6.png'"
          onmouseout="this.src='images/logoclubsuperior.png'" />
    </a>
   </div>
   <div id="logopiscinasuperior">
    <img src="images/logopiscinasuperior.png"
         onmouseover="this.src='images/5.png'"
         onmouseout="this.src='images/logopiscinasuperior.png'">
   </div>
   <div id="logotenissuperior">
    <img src="images/logotenissuperior.png"
         onmouseover="this.src='images/4.png'"
         onmouseout="this.src='images/logotenissuperior.png'" />
   </div>
   <div id="logopadelsuperior">
    <img src="images/logopadelsuperior.png"
         onmouseover="this.src='images/3.png'"
         onmouseout="this.src='images/logopadelsuperior.png'" />
   </div>
   <div id="logofitnesssuperior">
    <img src="images/logofitnesssuperior.png"
         onmouseover="this.src='images/2.png'"
         onmouseout="this.src='images/logofitnesssuperior.png'" />
   </div>
   <div id="logootrossuperior">
    <img src="images/logootrossuperior.png"
         onmouseover="this.src='images/1.png'"
         onmouseout="this.src='images/logootrossuperior.png'" />
   </div>
  </div>
 </body>
</html>
相关问题
最新问题