-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 回答
0

看起来不错的人

http://jsfiddle.net/6A5QD/

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

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

于 2013-09-19T01:43:58.970 回答