0

我有我正在设计的完整 php 主题，还有另一个用于图像幻灯片的插件，

这是我的图像幻灯片的代码，

 <script type="text/javascript" src="plugins/stack/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="plugins/stack/js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="plugins/stack/js/jquery.photostack.pack.js"></script>

    <script type="text/javascript">
      $(document).ready(function() {
        $('#photos').photostack({
          speed : 600,
          easeIn : 'easeOutExpo',
          easeOut : 'easeInExpo',
          autoplay : true,
          autoplayTimeout : 2000
        });
      });
    </script>

        <div id="photos">
          <img src="plugins/stack/images/sa_m_1.jpg" alt="Streetart 1" width="500" height="333" />
          <img src="plugins/stack/images/sa_m_2.jpg" alt="Streetart 2" width="500" height="332" />
          <img src="plugins/stack/images/sa_m_3.jpg" alt="Streetart 3" width="500" height="332" />
          <img src="plugins/stack/images/sa_m_4.jpg" alt="Streetart 4" width="500" height="375" />
          <img src="plugins/stack/images/sa_m_5.jpg" alt="Streetart 5" width="500" height="375" />
        </div>

      <div class="clear"></div>

当我将此代码保存在单个文件 php 或 html 文件中时，幻灯片正在工作，但是当我在实际主题的正文区域中使用此代码时，幻灯片无法正常工作，只有图像静态显示。所有 JScript 文件都已正确链接。

这是我的 main.php 文件的代码，其中幻灯片不起作用，

<?php include('header.php') ?>

        <p>Description goes here</p>

 <script type="text/javascript" src="plugins/stack/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="plugins/stack/js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="plugins/stack/js/jquery.photostack.pack.js"></script>

    <script type="text/javascript">
      $(document).ready(function() {
        $('#photos').photostack({
          speed : 600,
          easeIn : 'easeOutExpo',
          easeOut : 'easeInExpo',
          autoplay : true,
          autoplayTimeout : 2000
        });
      });
    </script>

        <div id="photos">
          <img src="plugins/stack/images/sa_m_1.jpg" alt="Streetart 1" width="500" height="333" />
          <img src="plugins/stack/images/sa_m_2.jpg" alt="Streetart 2" width="500" height="332" />
          <img src="plugins/stack/images/sa_m_3.jpg" alt="Streetart 3" width="500" height="332" />
          <img src="plugins/stack/images/sa_m_4.jpg" alt="Streetart 4" width="500" height="375" />
          <img src="plugins/stack/images/sa_m_5.jpg" alt="Streetart 5" width="500" height="375" />
        </div>

      <div class="clear"></div>
<?php include('footer.php') ?>

这是 slideshow.php / slideshow.html 的代码

 <script type="text/javascript" src="plugins/stack/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="plugins/stack/js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="plugins/stack/js/jquery.photostack.pack.js"></script>

    <script type="text/javascript">
      $(document).ready(function() {
        $('#photos').photostack({
          speed : 600,
          easeIn : 'easeOutExpo',
          easeOut : 'easeInExpo',
          autoplay : true,
          autoplayTimeout : 2000
        });
      });
    </script>

        <div id="photos">
          <img src="plugins/stack/images/sa_m_1.jpg" alt="Streetart 1" width="500" height="333" />
          <img src="plugins/stack/images/sa_m_2.jpg" alt="Streetart 2" width="500" height="332" />
          <img src="plugins/stack/images/sa_m_3.jpg" alt="Streetart 3" width="500" height="332" />
          <img src="plugins/stack/images/sa_m_4.jpg" alt="Streetart 4" width="500" height="375" />
          <img src="plugins/stack/images/sa_m_5.jpg" alt="Streetart 5" width="500" height="375" />
        </div>

      <div class="clear"></div>

slideshow.php / slideshow.html 和我的主主题文件都在同一个目录中，我不知道为什么幻灯片在我的主题文件中实现它时不起作用，而它在一个单独的文件中工作：/

我也尝试使用 php 在主文件中包含 slideshow.php 但这也不起作用。

4

1 回答 1

1

尝试将 javascript 代码放在 end body 标记之前。希望这可以解决您的问题。

例如：

<body>  
  <div class="clear"></div>

<script type="text/javascript" src="plugins/stack/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="plugins/stack/js/jquery.photostack.pack.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('#photos').photostack({
      speed : 600,
      easeIn : 'easeOutExpo',
      easeOut : 'easeInExpo',
      autoplay : true,
      autoplayTimeout : 2000
    });
  });
</script></body>
于 2013-09-26T13:38:42.003 回答