0

很抱歉这样一个基本问题，但我似乎无法让 CrossSlide jquery 插件工作。

我想用不同的图像制作简单的幻灯片，这些图像在网络浏览器中居中，并且尺寸不同。

谢谢！ 

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">


<style type="text/css">

body {

    background-color: black;
    margin: 20px;
    font-family: sans-serif;
    font-size: xx-small;
    color: white;
}



a {
    text-align: right;
    color: white;
}

#slideshow {
  width: 100%;
  height: 100%;
}

</style>


<title>CrossSlide</title>


</head>



<body>


<div><span class="contact-info"><a href="mailto:none@none.com">none@none.com</a></div>


<div id="slideshow"></div>






<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.cross-slide.min.js"></script>
<script>
  $(function() {
    $('#slideshow').crossSlide({
      sleep: 2,
      fade: 1
    }, [
      { src: 'data/tea.jpg' },
      { src: 'data/tea2.jpg' },
    ])
  });
</script>

</body>
</html>
4

1 回答 1

0

最大的问题是您引用了一个旧的 jQuery 库。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.cross-slide.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#slideshow').crossSlide({
            sleep: 2,
            fade: 1
        }, [
                { src: 'content/tea.png' },
                { src: 'content/tea2.jpg' }
            ]);
    });
</script>

如果您使用的是 Chrome，您可以单击扳手图标（右上角），然后单击“工具”，然后单击“JavaScript 控制台”，或者使用快捷键 Ctrl+Shift+J，然后您会看到 javascript 错误消息。

于 2012-08-28T20:14:52.590 回答