Question

我正在使用一个非常旧的网页，使用JAVA代码显示2个相同的幻灯片。我的任务是将其更新为jQuery Camera Plugin。

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

注意 请原谅荒谬的过时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相同＆＃34;相机＆＃34;幻灯片。一个有效，一个有趣

1 个答案: