Question

我有这个html文件代码：

<!DOCTYPE html>
<!--
-->
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="carousel.css">
        <link rel="stylesheet" type="text/css" href="vertical_slider.css">
        <link rel="stylesheet" type="text/css" href="glow-effect.css">
        <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
        <script src="java_script.js"></script>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>
    <body>
        <div>TODO write content</div>
        <div id="wrapper">
            <div id="carousel-wrapper">
                <img id="shadow" src="img/gui/carousel_shadow.png" />
                <div id="carousel">
                    <span id="pixar"><img src="img/large/pixar.jpg" /></span>
                    <span id="bugs"><img src="img/large/bugs.jpg" /></span>
                    <span id="cars"><img src="img/large/cars.jpg" /></span>
                    <span id="incred"><img src="img/large/incred.jpg" /></span>
                    <span id="monsters"><img src="img/large/monsters.jpg" /></span>
                    <span id="nemo"><img src="img/large/nemo.jpg" /></span>
                    <span id="radar"><img src="img/large/radar002665.png" /></span>
                    <span id="rat"><img src="img/large/rat.jpg" /></span>
                    <span id="toystory"><img src="img/large/toystory.jpg" /></span>
                    <span id="up"><img src="img/large/up.jpg" /></span>
                    <span id="walle"><img src="img/large/walle.jpg" /></span>
                </div>
            </div>
            <div id="thumbs-wrapper">
                <div id="thumbs">
                    <a href="#pixar" class="selected"><img src="img/small/pixar.jpg" /></a>
                    <a href="#bugs"><img src="img/small/bugs.jpg" /></a>
                    <a href="#cars"><img src="img/small/cars.jpg" /></a>
                    <a href="#incred"><img src="img/small/incred.jpg" /></a>
                    <a href="#monsters"><img src="img/small/monsters.jpg" /></a>
                    <a href="#nemo"><img src="img/small/nemo.jpg" /></a>
                            <a href="#radar"><img src="img/small/radar002665resized.jpg" /></a>
                    <a href="#rat"><img src="img/small/rat.jpg" /></a>
                    <a href="#toystory"><img src="img/small/toystory.jpg"  /></a>
                    <a href="#up"><img src="img/small/up.jpg" /></a>
                    <a href="#walle"><img src="img/small/walle.jpg" /></a>
                </div>
                <a id="prev" href="#"></a>
                <a id="next" href="#"></a>
            </div>
        </div>
        <div class="slideshow">
            <img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
            <img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
            <img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
            <img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" />
            <img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" />
        </div>
    </body>
</html>

在底部，类幻灯片是另一个jquery。 vertical_slider。

在我称之为java_script.js的javascript文件中，我做了：

$(function() {
    $('.slideshow').cycle({
        fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });

    $('#carousel').carouFredSel({
        responsive: true,
        circular: false,
        auto: false,
        items: {
            visible: 1,
            width: 200,
            height: '56%'
        },
        scroll: {
            fx: 'directscroll'
        }
    });

    $('#thumbs').carouFredSel({
        responsive: true,
        circular: false,
        infinite: false,
        auto: false,
        prev: '#prev',
        next: '#next',
        items: {
            visible: {
                min: 2,
                max: 6
            },
            width: 150,
            height: '66%'
        }
    });

    $('#thumbs a').click(function() {
        $('#carousel').trigger('slideTo', '#' + this.href.split('#').pop() );
        $('#thumbs a').removeClass('selected');
        $(this).addClass('selected');
        return false;
    });
});

这部分：

$('.slideshow').cycle({
    fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});

用于幻灯片放映，其余用于第二个jquery转盘。现在两个jquery都没有工作。在javascript文件中的幻灯片中我在执行inspect元素时遇到错误：未捕获TypeError：undefined不是on line nubmer 3上的函数

javascript文件中的第3行是：

$('.slideshow').cycle({

如果我将幻灯片中的javascript代码放在脚本标记内的html文件中，它会起作用，但我希望它与java_script.js文件中的其他javascript代码一起使用。

如何从html中的一个js文件调用不同的jquery javascript函数？

0 个答案: