-1

私はJQueryを初めて使用し、作成しているWebサイトのバナーとしてフラッシュローテーターの代わりに試してみようと思っていました。問題は、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 に答える