我无法弄清楚我的这个脚本是不行的

时间:2013-09-19 00:40:57

标签: jquery

我似乎无法弄清楚为什么这个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/

2 个答案:

答案 0 :(得分:0)

看起来很好的男人

http://jsfiddle.net/6A5QD/

不要忘记你的;。你的链接方法是......“有趣”。

添加一些绝对的CSS,这样你就不会让那个盒子“跳”

答案 1 :(得分:0)

<强>问题: -

您在site加载jquery.backstretch.min.js之前加载jquery library,导致您的网站出现错误。当您尝试使用尚未定义的jQuery object

检查控制台

enter image description here

解决方案

jquery.backstretch.min.js

之前加载jQuery库文件

喜欢这个

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