-1

我是 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>

任何人都可以帮助我，因为我很困惑！

4

2 回答 2

2

你的问题在这里：

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

您不能直接链接到文件的 Github“下载”并期望它的行为类似于CDN。当您转到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
});
于 2012-10-12T22:36:59.467 回答
1

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

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

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

于 2012-10-12T22:49:37.777 回答