Question

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

我想制作简单的幻灯片，其中不同的图像在web浏览器中居中，并且不是都具有相同的尺寸。

谢谢！

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

Answer 1

最大的问题是你引用了一个旧的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错误消息。< / p>

使用CrossSlide进行幻灯片放映

1 个答案: