Question

我最近在我的网站主页上添加了幻灯片。当我检查主页时，幻灯片显示工作正常，但只有一个问题。其余的html / css代码消失了。这是我的jsfiddle的link（评论是荷兰语）。

我查了一些其他问题，但找不到答案。

我的代码：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Jquery Tools Slideshow - jsFiddle demo by StyloMonnik</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>

  <link rel="stylesheet" type="text/css" href="/css/normalize.css">


  <link rel="stylesheet" type="text/css" href="/css/result-light.css">


      <script type='text/javascript' src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>


  <style type='text/css'>
    /*
    zorgt ervoor dat het scrollen niet flipt
*/
 .scrollable {
    /* gewoon die standaart insteldingetjes DAT ZE niet eindeloos langs elkaar gaan staan*/
    position:relative;
    overflow:hidden;
    width: 470px;
    height:260px;
}
/*
    Moet moeilijk groot zijn en net zo lange als de afbeeldingen. tevens de basis
*/
 .scrollable .items {
    /* deze dan weer niet té groot */
    width:20000em;
    position:absolute;
    /*clear:both;*/
    height: 260px;
}
.items div {
    float:left;
    width:470px;
}
/*  om het rollen lekker te controlleeren en lekker te laten verlopen */
 .scrollable img {
    float:left;
    margin:0;
    background-color:#fff;
    width:470px;
    height:260px;
    position: relative;
}
.scrollable img.hover {
    background-color:#123;
}
.scrollable .caption {
    color: #fff;
    position: absolute;
    bottom: 12px;
    padding-left: 18px;
    font: bold 14px arial;
}
.scrollable .caption-bkgd {
    background-color: #000;
    height: 40px;
    position: absolute;
    bottom: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
/* Om het actief te maken en aan zijn half uur beweging te komen. */
 .scrollable .active {
    border:2px solid #000;
    position:relative;
    cursor:default;
}
/* Posietie en dementies of  die blokjeas  */
 .navi {
    margin: -26px 0 0 0;
    position:Absolute;
    left: 400px;
    width:200px;
    height:13px;
    z-index: 9999;
}
/* Blokjes egekkigheid*/
 .navi a {
    width:10px;
    height:11px;
    float:left;
    margin:0 4px;
    background-color: #d9d9d9;
    display:block;
}
.navi a:hover, .navi a.active {
    background-color: red;
}
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(document).ready(function () {

    $("#chained").scrollable({
        circular: true,
        mousewheel: true,
        onSeek: function () {
            $('.caption').fadeIn('fast');
        },
        onBeforeSeek: function () {
            $('.caption').fadeOut('fast');
        }
    }).navigator().autoscroll({
        interval: 6000
    });
});
});//]]>  

</script>


</head>
<body>
  <!-- vorige plaatje met als die gek doet jwz altijd moelijk van 1 naar 4 -->
<a class="prev browse left"></a>

<!-- basis voor het scrollen -->
<div class="scrollable" id=chained>
    <!-- basis element items -->
    <div class="items">
        <!-- 1-5 -->
        <div>
            <img width="470" height="260" src="http://haywebattachments.blob.core.windows.net/public/182/20394/440780/$l/mill,%20emmastraat%201.jpg" alt="" />
            <div class="caption-bkgd"></div>
            <div class="caption">Te koop: Emmastraat 1, 5451 ZE Mill</div>
        </div>
        <!-- 5-10 -->
        <div>
            <img width="470" height="260" src="http://haywebattachments.blob.core.windows.net/public/182/14980/694262/$l/687_74063_40$167.jpg" alt="" />
            <div class="caption-bkgd"></div>
            <div class="caption hide">Te koop: Vierhoeksweg 40, 5453 KC Langenboom</div>
        </div>
        <!-- 10-15 -->
        <div>
            <img width="470" height="260" src="http://haywebattachments.blob.core.windows.net/public/182/14991/648359/$l/vooraanzicht%20beeksenhof.jpg" alt="" />
            <div class="caption-bkgd"></div>
            <div class="caption hide">Te koop: Beeksenhof 3, 5841 BA Oploo</div>
        </div>
        <div>
            <img width="470" height="260" src="http://haywebattachments.blob.core.windows.net/public/182/48405/789558/$l/rijkevoort,%20korenbloemstraat%206.jpg" alt="" />
            <div class="caption-bkgd"></div>
            <div class="caption hide">Te koop: Korenbloemstraat 6, 5447 AE Rijkevoort</div>
        </div>
    </div>
</div>
<!-- sluit het geheel in -->
<div class="navi"></div>

</body>


</html>

Link到网站。

消失的部分是“koppelingen”旁边的“snel zoeken”。

我自己无法弄明白。你有什么想法吗？

修改现在页面上的滑块是临时滑块。

Answer 1

我发现了下一个可能的问题：

<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<script type='text/javascript' src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<style type='text/css'>
<script type='text/javascript'>//<![CDATA[

上面的代码应该是双引号：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<style type="text/css">
<script type="text/javascript">//<![CDATA[

添加图像滑块后，html / css代码消失

1 个答案: