Javascript 不兼容的Java脚本_Javascript_Jquery_Html

Javascript 不兼容的Java脚本

javascript jquery html

Javascript 不兼容的Java脚本,javascript,jquery,html,Javascript,Jquery,Html,在一个网站中，我包括了一个自定义谷歌地图和一个自定义幻灯片这是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>

在一个网站中，我包括了一个自定义谷歌地图和一个自定义幻灯片

这是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>


塞德罗斯警察局
函数初始化（）{
var latlng=新的google.maps.latlng（40.427917，-3.657941）；
变量设置={
缩放：15，
中心：拉特林，
mapTypeControl:true，
mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU}，
导航控制：对，
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“map_canvas”），设置）；
var companyPos=new google.maps.LatLng（40.427288，-3.657919）；
var companyMarker=new google.maps.Marker({
职位：companyPos，
地图：地图，
标题：“一些标题”
})
;}

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

下面是幻灯片放映的几行内容：

<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 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>

根据请求，以下是在我的桌面上使用firefox的精简代码（根据剪切粘贴错误编辑）：


XZZZZXXXXXZZZZZZZZZZ
函数初始化（）{
var latlng=新的google.maps.latlng（40.427917，-3.657941）；
变量设置={
缩放：15，
中心：拉特林，
mapTypeControl:true，
mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU}，
导航控制：对，
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“map_canvas”），设置）；
var companyPos=new google.maps.LatLng（40.427288，-3.657919）；
var companyMarker=new google.maps.Marker({
职位：companyPos，
地图：地图，
标题：“一些标题”
});
}

解释您希望解决方案如何解决问题会有所帮助。还解释了所做的更改，使人们不必成为人类差异工具

试试这个

不是很好的答案，仍然缺少引号，也不是解决方案。单词属性值上没有引号也是有效的html。html属性值周围应该始终有引号。换句话说，在

之后。此外，如果不在分配给您的事件的函数中，您也不能期望

此

以您想要的方式工作。将JavaScript与HTML完全分离是一种最佳实践。使用外部JavaScript。@PHPglue，谢谢您的建议，但在包含了所需的引号后，问题没有得到解决。@mvasco-您的小部件子目录中有一个嵌入的脚本，其名称以eltiempo_RCZ开头。。。。这个脚本的目的是什么？@maurice，它是一个包含天气报告小部件的脚本。我已经检查了有没有这个小部件和问题是相同的网站。谢谢。@mvasco-在这种情况下，您的代码可以工作，除了滑块中没有“flipVert”效果（它将恢复为淡入淡出），并且您的img标记应该是自封闭的，例如，在您的解决方案中使用大于签名的斜杠，天气报告小部件不会显示。地图控制被启用了…对吗？是的，天气小部件不在那里。地图鼠标控制缩放+/-平移工作。然后问题在于天气小部件或样式表。在您的解决方案中，删除了样式表的链接。现在我已经测试了它，激活了样式表，没有天气小部件，地图控件被禁用。这应该意味着问题在于样式表，对吧？可能是的，但我没有下载CSS文件，以便减少可能出错的因素。问题一定在另一个地方。可能是个错误。但您的解决方案是删除天气小部件。我会接受你的回答。非常感谢。

<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>