簡體   English   中英

當從文件外部包含Javascript代碼時不起作用

[英]Javascript code doesn't work when including externally from file

我有我正在設計的完整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,但這也不起作用。

嘗試將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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM