-2

この div スライドショー スクリプトが機能しない理由がわかりません。

スクリプト：

jQuery(function($){
    $("#slideshow > div:gt(0)").hide();

    setInterval(function() { 
        $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    },  3000);
})

html:

<div id="slideshow">
<div>
<img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
</div>
<div>
<img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
</div>
<div>
Pretty cool eh? This slide is proof the content can be anything.
</div>
</div>

サイトへのリンクは次のとおりです: http://www.pearsonaviation.com.au/new/

4

2 に答える 2

0

問題：-

サイトにロードjquery.backstretch.min.jsする前にロードjquery libraryしているため、サイトでエラーが発生してjQuery objectいます。まだ定義されていないものを使用しようとしています。

コンソールをチェック

ここに画像の説明を入力

解決

前に jQuery ライブラリ ファイルを読み込むjquery.backstretch.min.js

このような

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://www.pearsonaviation.com.au/new/modules/mod_backstretch/tmpl/js/jquery.backstretch.min.js" type="text/javascript"></script>

問題のあるコード

  <script src="/new/media/system/js/mootools-core.js" type="text/javascript"></script>
  <script src="/new/media/system/js/core.js" type="text/javascript"></script>
  <script src="/new/media/system/js/caption.js" type="text/javascript"></script>
  <!-- jquery.backstretch.min.js -->
  <script src="http://www.pearsonaviation.com.au/new/modules/mod_backstretch/tmpl/js/jquery.backstretch.min.js" type="text/javascript"></script>
  <script type="text/javascript">
window.addEvent('load', function() {
                new JCaption('img.caption');
            });
  </script>
  <style>
        .noImages{
        color:#000;
        font-size:11px;
        background:#F9EAAE;
        border:1px dotted #ff0000;
        padding:5px;
        }

        </style>

<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" href="/new/templates/onlinespark/css/template.css" />


you are loading jQuery.min here
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="/new/templates/onlinespark/cufon-yui.js"></script>
    <script src="/new/templates/onlinespark/HelveticaNeueLT_Com_65_Md_800.font.js"></script>
于 2013-09-19T02:05:03.683 に答える