Question

我是JQuery的新手并且认为我会给它一个去而不是闪光旋转器作为我正在创建的网站的横幅，我的问题是我拥有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>

任何人都可以帮助我，因为我很难过！

Answer 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
});

Answer 2

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

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

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

JQuery Cycle Plugin不起作用

2 个答案: