Question

我有我正在设计的完整的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和我的主要主题文件都在同一个目录中，我不知道为什么幻灯片在我的主题文件中实现它时工作在一个单独的文件中时不起作用：/ < / p>

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

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

从文件外部包含时，Javascript代码不起作用

1 个答案: