JQuery Cycle Plugin 只是不起作用[关闭]答案

【问题标题】：JQuery Cycle Plugin just doesn't work [closed]JQuery Cycle Plugin 只是不起作用[关闭]
【发布时间】：2012-10-12 22:31:37
【问题描述】：

我是 JQuery 的新手，我想尝试一下，而不是使用 Flash Rotator 作为我正在创建的网站的横幅，我的问题是我拥有 http://jquery.malsup.com/cycle/basic.html 所需的所有代码，我拿了源代码，但由于某种原因，在任何浏览器中，图像都不会旋转，这是我的代码：

    <title>HOME</title>
    <link rel="shortcut icon" type="image/x-icon" href="../images/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="external/cascade/main.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="description" content="Home Care Repair">
    <?php include 'external/scripts/main.php'; ?>

    <style type="text/css">
        .bannerRotator { height: 250px; width: 600px; margin: 0px; overflow: hidden;}
        .bannerRotator img { padding: 0px; border: 0px solid #ccc; background-color: transparent; border-radius: 10px; }
    </style>

    <!-- include jQuery library -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <!-- include Cycle plugin -->
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('.bannerRotator').cycle(
                fx:    'fade', 
                speed:  3000
            )
        });

        function handleSelect(popLinks)
        {   
            window.location = popLinks.value+".php";
        };
    </script>

    <!-- CSS Support for Internet Explorer -->

    <!--[if lte IE 9]>
        <link rel=stylesheet href="external/cascade/internetExplorerCss/ie.css" type="text/css" />
    <![endif]-->

</head>

<body>
    <div id="headerContainer">
        <div id="navigation" style="width: 818px;">
            <ul id="css3menu1" class="topmenu">
                <li class="topmenu"><a href="index.php" style="width: 85px; height: 5px; line-height: 9px; background-image: url('../images/navigation/bgNav.png'); border-left: 1px solid #ccc;">Home</a></li>
                <li class="topmenu"><a href="heating.php" style="width: 85px; height: 5px; line-height: 9px; background-image: url('../images/navigation/bgNav.png');">Heating</a></li>
                <li class="topmenu"><a href="plumbing.php" style="width: 85px; height: 5px; line-height: 9px; background-image: url('../images/navigation/bgNav.png');">Plumbing</a></li>
                <li class="topmenu"><a href="electrical.php" style="width: 85px; height: 5px; line-height: 9px; background-image: url('../images/navigation/bgNav.png');">Electrical</a></li>           
                <li class="topmenu"><a href="whyUs.php" style="width: 120px; height: 5px; line-height: 9px; background-image: url('../images/navigation/bgNav.png');">Why Choose Us</a></li>
                <li class="topmenu"><a href="faq.php" style="width: 85px; height: 5px; line-height: 9px; background-image: url('../images/navigation/bgNav.png');">FAQs</a></li>
                <li class="topmenu"><a href="adviceHelp.php" style="width: 119px; height: 5px; line-height: 9px; background-image: url('../images/navigation/bgNav.png');">Advice and Help</a></li>
            </ul>
        </div>

        <div id="header">
            <a href="index.php" border="0"><img src="../images/header/title.png" alt="Home Care Repair Title Image" /></a>
        </div>

        <div id="headerNavigation">
            <a href="index.php"> > Home</a> <a href="contactUs.php"> > Contact Us</a>
        </div>
    </div>

    <div id="mainContent" style="background-image: url(../images/mainContent/mainContent.png); padding: 10px; width: 601px; height: 641px;">
        <div class="bannerRotator"> 
            <img src="../images/bannerRotater/shrek(1).jpg" width="600" height="250" /> 
            <img src="../images/bannerRotater/contact(2).jpg" width="600" height="250" /> 
            <img src="../images/bannerRotater/old(3).jpg" width="600" height="250" /> 
            <img src="../images/bannerRotater/digital(4).jpg" width="600" height="250" /> 
        </div>

        MAIN CONTENT HERE

    </div>

    <div id="sideBar">
        <div id="comboBox" style="background-image: url(../images/sidebar/comboBox.png);">
            <select name="popLinks" onchange="javascript:handleSelect(this)" style="margin-top: 55px; margin-left: 35px;">
                <option value="#">--------- Select an Option ---------</option>
                <option value="contactUs">Contact Us</option>
                <option value="faq">FAQs</option>
                <option value="heating">Heating</option>
                <option value="plumbing">Plumbing</option>
                <option value="electrica">Electrical</option>
            </select>
        </div>

谁能帮帮我，因为我很困惑！

【问题讨论】：

标签： javascript jquery image cycle

【解决方案1】：

你的问题在这里：

<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>

您不能直接链接到 Github “下载”文件并期望它的行为类似于 CDN。当您转到the URL 时，浏览器会尝试下载该文件。您应该会在控制台中看到错误或警告。

除非为此目的提供 CDN 链接，否则您应该下载文件并将其上传到您自己的服务器上的主机。

包含应该看起来更像这样：

<script type="text/javascript" src="http://myDomain/myplugins/jquery.cycle.all.latest.js"></script>

或类似的东西：

<script type="text/javascript" src="/myplugins/jquery.cycle.all.latest.js"></script>

您的代码中还缺少大括号，如下所示：

$('.bannerRotator').cycle({
    fx:    'fade', 
    speed:  3000
});

【讨论】：

我可以很好地使用它，就像 OP 一样。他实际上有我的回答中描述的语法错误。
@AbdullahJibaly：当您将下载链接用作 CDN 时，某些浏览器（如 Webkit）会看到错误的 mime 类型并尝试下载文件。使用 Github 下载链接代替 CDN 是一件非常糟糕的事情，即使它适用于某些浏览器。
没错，但在这种情况下，这不是他的问题。（他只是从插件作者的示例中复制了它）。
错误是：Resource interpreted as script but transferred with MIME type binary/octet-stream.
这个例子就在这里：jquery.malsup.com/cycle/basic.html

【解决方案2】：

您需要在传递给循环的参数周围加上大括号：

$(document).ready(function() {
    $('.bannerRotator').cycle({
        fx:    'fade', 
        speed:  3000
    });
});

此处为 JSBin 示例：http://jsbin.com/oruwav/2/

【讨论】：