jquery - 带有 2 个 jquery 滑块（一个全屏背景，一个在内容中）的页面仅在 Chrome 中发生冲突

Question

对于一个项目，我试图获得一个全屏背景滑块（Backstretch）和内容中的另一个滑块（ResponsiveSlides）。

这些在除 Chrome 和 Chromium 之外的所有浏览器中都可以很好地播放。

项目链接： http: //klanten.icu-media.net/wittehoeve

<script src="Jscripts/respond.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="Jscripts/jquery.backstretch.js"></script>
<script src="Jscripts/responsiveslides.min.js"></script>
<script src="Jscripts/jquery.flexnav.js"></script>
<script type="text/javascript">
onresize=onload=function() {
    if ($(window).width() < 768) {
        $("#MainContent").insertAfter($("#ImageSlider"));
        $("#Menu").insertBefore($("#TopBanner"));
    } else {
        $("#MainContent").insertBefore($("#ImageSlider"));
        $("#Menu").insertBefore($("#Footer"));
    }
};
</script>
<script>
  $(function() {
    $(".rslides").responsiveSlides();
  });
</script>
<script type="text/javascript">
    jQuery(document).ready(function($) {

                $(".flexnav").flexNav();
            });
</script>
<script>
    $(document).ready(function($){
     $.backstretch([
      "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg",
      "img/LayoutPhoto/PoortBackground.jpg",
      "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
      ], {
      fade: 750,
      duration: 19000
        });
    });
</script>

那是调用所有 javascripts 的 html 部分（并且位于 end body 标记的上方。