このアプリケーションでJQueryサイクルプラグインが壊れているのはなぜですか？

JQuery Cycle pluginで初めて遊んだことがあり、簡単な画像スライドショーを試してみました。ほとんどの場合、私はthis gentleman's tutorialに従っています。私は、このコードになってしまった：このアプリケーションでJQueryサイクルプラグインが壊れているのはなぜですか？

#picwrap { 
    display: block; 
    height: 560px; 
    width: 580px; 
    margin: auto; 
} 

#piccont { 
    display: block; 
    float: left; 
    height: 560px; 
    width: 580px; 
    overflow: auto; 
} 

#prev { 
    background-image: url(arrow-left.png); 
    background-repeat: no-repeat; 
    background-position: center center; 
    display: block; 
    height: 560px; 
    width: 100px; 
    float: left; 
    position: relative; 
    z-index: 99; 
} 

#next { 
    background-image: url(arrow-right.png); 
    background-repeat: no-repeat; 
    background-position: center center; 
    display: block; 
    height: 560px; 
    width: 100px; 
    float: right; 
    position: relative; 
    z-index: 99; 
} 

#slider { 
    display: block; 
    height: 560px; 
    width: 580px; 
    float: left; 
    position: absolute; 
    overflow: hidden; 
}

スクリプトが全く動作していないようです：

<head> 
<style> @import "main.css"; </style> 
    <script type="text/javascript" src="jquery-3.0.0.min.js"> </script> 
    <script type="text/javascript" src="jquery.cycle.all.js"> </script> 
    <script type="text/javascript"> 
    $('#slider').cycle({ 
    fx:  'scrollHorz', 
    speed: 'slow', 
    next: '#next', 
    prev: '#prev' 
    }); 
</script> 
</head> 
<body> 

<div id="picwrap"> 
<div id="piccont"> 

    <div id="prev" class="controller"> </div> 
    <div id="slider"> 
    <img src="pic1.png" /> 
    <img src="pic2.png" /> 
    <img src="pic3.png" /> 
    </div> 
    <div id="next" class="controller"> </div> 

</div> 
</div> 

</body>

関連するCSSは次のようです。私は私が気づくことに苦労しているわずかな誤りを作ったと仮定することができます。私はビデオと複数回クロスリファレンスし、パスとファイル名をチェックしました。私も他のチュートリアルでを見てきましたが、私が間違ったことを見つけることができませんでした。スクリプトの追加前後でファイルに差異がないように見えるので、プラグインの実装はまったく失敗したようです。私はそれの上に2つの矢印（それはunclickableです）と静止画像（pic1）を取得します。

ご協力いただければ幸いです。

出典

2016-07-04 Placowdepuss

あなたのCSSは間違っているようです。最初の行に「picWrap」と書かれていますが、私が正しい場合は「#picWrap」にする必要があります。 Cycleがエラーを生成しないが、それでも動作しないときのほとんどの時間は、CSSに含まれています。

また、（bodyタグを閉じる前に）一番下にあなたのJSを配置し、これにあなたのJSを変更します。

$(document).ready(function(){ 
    $('#slider').cycle({ 
     fx:  'scrollHorz', 
     speed: 'slow', 
     next: '#next', 
     prev: '#prev' 
    }); 
});

サイクルは、それが異なるスライドのサイズを計算することができます前に、ロードする画像を必要とします。いつか私は$（document）.readyの代わりに$（window）.loadを使うこともします。イメージが完全にロードされた後、ウィンドウのロードが実行されます。

出典

2016-07-04 19:34:30

ありがとう、あなたのバージョンにJavascriptを変更して問題を解決しました。 CSSに関しては、正直言って私は単なる素人であり、ユビキタスなケース・コンベンションがあることに気づいていませんでした。私はちょうど小文字にしました。不足しているハッシュは単なるフォーマットエラーで、私はそれを私のコードに含めました。 – Placowdepuss

このアプリケーションでJQueryサイクルプラグインが壊れているのはなぜですか？

答えて

関連する問題