Question

在这里，我找到了我正在为项目编辑的代码： http://coolcarousels.frebsite.nl/c/43/#

尝试链接.js文件时，它不会加载，创建一个大图像而不是图像图块。

为所有帮助干杯。

HTML

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script type="text/jquery" href="index.js"></script>
    </head>
    <body>
        <div id="wrapper">
           <div class="carousel">
              <div><img src="images/matt.png" /></div>
              <div><img src="img/i02.jpg" /></div>
              <div><img src="img/i03.jpg" /></div>
              <div><img src="img/i04.jpg" /></div>
              <div><img src="img/i05.jpg" /></div>
              <div><img src="img/i06.jpg" /></div>
              <div><img src="img/i07.jpg" /></div>
              <div><img src="img/i08.jpg" /></div>
              <div><img src="img/i09.jpg" /></div>
              <div><img src="img/i10.jpg" /></div>
           </div>
        </div>
    </body>
</html>

CSS

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}
body {
    min-height: 600px;
    background-color: #fff;
}
body * {
    font-family: Arial, Geneva, SunSans-Regular, sans-serif;
    font-size: 14px;
    color: #333;
    line-height: 22px;
}

#wrapper {
    width: 800px;
    height: 500px;
    margin: -250px 0 0 -400px;
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
}

#wrapper,
.carousel,
.carousel div,
.carousel div img {
    width: 800px;
    height: 500px;
}
.carousel {
    float: left;
    overflow: hidden;
    cursor: pointer;
}
.carousel div {
    float: left;
    overflow: hidden;
    position: relative;
}
.carousel div img {
    border: none;
    display: block;
    float: left;
    position: absolute;
}

/* after js */
.carousel div.thumb img {
    width: 160px;
    height: 100px;
    left: -30px !important;
    top: 0 !important;
}

Javascript（这就是它在网站上所说的，所以它可能是jQuery，但我不确定）

$(function() {
    //  cache first carousel
    var $org = $('.carousel');

    //  variables
    var width = 800,
        height = 500,
        cols = 8,
        rows = 5,
        $img = $org.children()
        imgs = $img.length;

    //  duplicate carouesl
    for( a = 0; a < rows * cols; a++ ) {
        $('#wrapper').append( $org.clone() );
    }

    //  cache all carousls
    $all = $('.carousel');
    $all.each(function( i ) {

        //  current row and column
        var row = Math.floor( i / cols ),
            col = i % cols;

        var $t = $(this),
            i2 = i % imgs,
            $x = $img.eq( i2 ).clone();

        //  first image -> thumbnail
        $x.addClass( 'thumb' );
        $t.prepend( $x );

        var $d = $t.children();

        //  onClick start scrolling the first carousel
        $t.click(function() {
            var d = ( $t.triggerHandler( 'currentPosition' ) == 0 ) ? i2+1 : 0;
            $org.trigger( 'slideTo', d );
        });

        //  set width + height
        $t.add( $d ).css({
            width: width / cols,
            height: height / rows
        });

        //  position images
        $d.children().css({
            left: -(col * (width / cols)),
            top: -(row * (height / rows))
        });
    });

    //  create carousels
    $all.carouFredSel({
        circular: false,
        items: {
            visible: 1,
            width: width / cols,
            height: height / rows
        },
        scroll: {
            fx: 'directscroll',
            onBefore: function() {
                var $t = $(this);

                //  trigger next carousel to scroll after 25 ms.
                setTimeout(function() {
                    $t.parent().next().children().trigger( 'slideTo', $t.triggerHandler( 'currentPosition' ) );
                }, 25);
            }
        }
    }).trigger( 'pause' );
});

Answer 1

<script type="text/jquery" href="index.js"></script>

Hm中

text/jquery

jQuery不是编程语言，甚至不是MIME类型。使用text/javascript，或者只删除type属性。其次，指定JavaScript位置的属性名称为src，而不是href。（我也犯了这个错误，但是如果你查看网络面板并且没有提出任何请求，那么这可能是这两个问题中的一个。或者，在你的情况下，两者都是。）

看起来你也需要在它之前包含jQuery，所以从https://code.jquery.com/jquery-2.1.1.js抓取一个副本，并将其包含在另一个<script>元素中。

<script src="jquery-2.1.1.js"></script>
<script src="index.js"></script>

Answer 2

<script type="text/jquery" href="index.js"></script>无效。

如果您确实使用的是JQuery，则需要使用其他<script>标记进行导入。

Answer 3

首先将type="text/jquery"替换为type="text/javascript"

<link rel="stylesheet" href="index.css">
<script type="text/javascript" href="index.js"></script>

如果你的javascript文件仍然没有链接到html文件，那么文件PATH也可能有问题。

Answer 4

.js 文件位于同一文件夹或单独的文件夹中。如果您的.js文件位于单独的文件夹中且html位于单独的文件夹中，则需要指定 .js 文件的绝对路径

jQuery文件未链接到HTML文档

4 个答案: