我的JQuery图片幻灯片似乎不起作用

debugcn 发表于 Dev

伦德尔

我正在学习JQuery，并且想学习如何编写简单的图像幻灯片演示，因此我在youtube上观看了一个教程并复制了代码。当我测试它时，它什么也没做。我尝试将jquery链接更改为最新的链接，但仍然没有运气。

<html>
<head>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  <script src="jqslideshow.js" type="text/javascript"></script>
</head>
<body>
  <img src="nature.jpg" id="slideshow" width="500" height="300">
  <table>
    <tr>
      <td align="left"><a href="javascript:changeImage(-1)">Previous</a></td>
      <td align="right"><a href="javascript:changeImage(1)">Next</a></td>
      <td id="play_stop" align="right"><a href="javascript:play()" >Play</a></td>
    </tr>
  </table>
</body>
</html>

这是 jqslideshow.js

var Image = new Array("nature.jpg","treehouse.jpg","drstrange.jpg");
var ImageNumber = 0;
var ImageLength = Image.length - 1;
var Interval;
function changeImage(num){
  ImageNumber = ImageNumber + num;
  if(ImageNumber > ImageLength){
    ImageNumber = 0;
  }else if(ImageNumber < 0){
    ImageNumber = ImageLength;
  }
  $("document").ready(function(){
    $('#slideshows').fadeOut('slow', function(){
      $(this).attr('src', Image[ImageNumber]);
    }).fadeIn('slow');  
  });
}

function play(){
  Interval = setInterval(changeImage(1), 200);
  document.getElementById("play_stop").innerHTML = "<a href='javascript:stop()'>Stop</a>";
}

function stop(){
  document.getElementById("play_stop").innerHTML = "<a href='javascript:play()'>Play</a>";
  clearInterval(Interval);
}

Poehli

确保您进行更改

$("document").ready(function(){
    $('#slideshows').fadeOut('slow', function(){
      $(this).attr('src', Image[ImageNumber]);
    }).fadeIn('slow');  
  });

到

$(document).ready(function(){
    $('#slideshow').fadeOut('slow', function(){
      $(this).attr('src', Image[ImageNumber]);
    }).fadeIn('slow');  
  });

因此，请删除引号，更重要的是，将id更改为slideshow，因为您以这种方式命名了image标签。

还要确保图像与html文件位于同一目录中，或创建相对路径。

如果仍然无法使用，请在浏览器中使用控制台。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。