2 个相同的 "Camera" 个幻灯片。一个工作，一个搞笑

Question

我正在处理一个非常旧的网页，该网页使用 JAVA 代码来显示 2 个相同的幻灯片。我的任务是将其更新为 jQuery 相机插件。

我以前用过这个插件，这看起来很简单，但是右边的幻灯片表现得很不寻常。图像将过渡并消失。我想知道是否有人可以阐明为什么会发生这种情况。

注意 请原谅可笑的过时HTML和所有的内联CSS。这不是我的代码！ :(

JavaScript

<script type="text/javascript">
  $(function() {
    $('.camera_wrap').camera({
      pagination: false,
      thumbnails: false,
      navigation: false,
      playPause: false,
      time: 3000,
      loader: 'none'
    });
  });
</script>

HTML

    <table style="width:800px;height:220px;margin:0 auto;" border="0">
        <tr>
            <td style="width:266px">

                    <div class="camera_wrap" id="cw1" style="width:266px;height:185px;">
                        <div data-src="../JPEGS/3.jpg"></div>
                        <div data-src="../JPEGS/4.jpg"></div>
                        <div data-src="../JPEGS/5.jpg"></div>
                        <div data-src="../JPEGS/6.jpg"></div>
                        <div data-src="../JPEGS/7.jpg"></div>
                        <div data-src="../JPEGS/11a.jpg"></div>
                        <div data-src="../JPEGS/14.jpg"></div>
                    </div>


            </td>
            <td style="width:268px;text-align:center;" valign="middle">
                <b><font color="#FFFFCC" face="Arial Black" size=
                "5"><i>ENGINEERING</i></font></b>
                <p><b><font color="#FFFFCC" face="Arial Black" size=
                "5"><i>ARCHITECTURE</i></font></b></p>
                <p><b><font color="#FFFFCC" face="Arial Black" size=
                "5"><i>SURVEYING</i></font></b></p>
                <p><b><font color="#FFFFCC" face="Arial Black" size=
                "5"><i>PLANNING</i></font></b></p>
            </td>
            <td style="width:266px">

                    <div class="camera_wrap" id="cw2" style="width:266px;height:185px;">
                        <div data-src="../JPEGS/3.jpg"></div>
                        <div data-src="../JPEGS/4.jpg"></div>
                        <div data-src="../JPEGS/5.jpg"></div>
                        <div data-src="../JPEGS/6.jpg"></div>
                        <div data-src="../JPEGS/7.jpg"></div>
                        <div data-src="../JPEGS/11a.jpg"></div>
                        <div data-src="../JPEGS/14.jpg"></div>
                    </div>

            </td>
        </tr>
    </table>

Answer 1

我会尝试将幻灯片分开，我可以看到您有不同的 ID cw1 和 cw2，然后参考

<script type="text/javascript">
  $(function() {
    $('#cw1').camera({
      pagination: false,
      thumbnails: false,
      navigation: false,
      playPause: false,
      time: 3000,
      loader: 'none'
    });
$('#cw2').camera({
      pagination: false,
      thumbnails: false,
      navigation: false,
      playPause: false,
      time: 3000,
      loader: 'none'
    });
  });
</script>

2 个相同的 "Camera" 个幻灯片。一个工作，一个搞笑

2 identical "Camera" slideshows. One works, one acts funny

jquery

slideshow