Javascript jQuery文件未链接到HTML文档

Javascript jQuery文件未链接到HTML文档,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我在这里找到了我正在为项目编辑的代码: 当尝试链接.js文件时,它不会加载,而是创建一个大图像,而不是图像的平铺 为所有的帮助干杯 HTML Javascript这是它在网站上说的,所以可能是jQuery,但我不确定 $(function() { // cache first carousel var $org = $('.carousel'); // variables var width = 800, height = 500,

我在这里找到了我正在为项目编辑的代码:

当尝试链接.js文件时,它不会加载,而是创建一个大图像,而不是图像的平铺

为所有的帮助干杯

HTML

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' );
});
jQuery不是编程语言,甚至不是MIME类型。使用text/javascript,或者干脆删除type属性。其次,指定JavaScript位置的属性的名称是src,而不是href。我也经常犯这样的错误,但是如果你在网络面板中看到没有人提出请求,很有可能是这两个问题中的一个。或者,在你的情况下,两者兼而有之

看起来您也需要在jQuery之前包含它,所以从中获取一个副本,并将其包含在另一个元素中

无效

如果您确实在使用JQuery,则需要使用附加标记导入它。

首先将type=text/JQuery替换为type=text/javascript


如果您的javascript文件仍然没有链接到html文件中,则文件路径也可能有问题。

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

不是$all一个元素吗?如果没有,则应检查控制台。不幸的是,许多初学者不知道这一点。它经常会告诉你一些问题。在浏览器中点击F12,然后转到开发工具中的控制台。谢谢,我对HTML很陌生,谢谢你告诉我jQuery不是一种语言,这真的很有用。我将确保使用src而不是href,并且我将确保链接jQuery。
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;
}
$(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' );
});
<script type="text/jquery" href="index.js"></script>
text/jquery
<script src="jquery-2.1.1.js"></script>
<script src="index.js"></script>
<link rel="stylesheet" href="index.css">
<script type="text/javascript" href="index.js"></script>