使用非常基本的 jquery 滑块时遇到困难...无法正确滑动图像答案

【问题标题】：Having tough time with a very basic jquery slider...Not sliding through images properly使用非常基本的 jquery 滑块时遇到困难...无法正确滑动图像
【发布时间】：2012-08-02 07:31:40
【问题描述】：

我遇到的问题是它只快速显示 2-3 张图像，然后停止滑动图像，它只停在一张图片上。请帮我弄清楚下面的代码有什么问题： HTML

<script type="text/javascript">
jQuery("#slideshow > div:gt(0)").hide();

setInterval(function() {
  jQuery('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);
</script>
<LINK REL=StyleSheet HREF="slideshow.css" TYPE="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>



<body>
<div id="slideshow" style="align:center;">

   <div>
     <img src="htc-touch-diamond-versus-iphone-3g.jpg" width="800px" height="400px">
   </div>

   <div>
     <img src="iphone_ipad.jpg" width="800px" height="400px">
   </div>

<div>
     <img src="iphone-3gs.jpg" width="800px" height="400px">
   </div>


<div>
     <img src="iphone3gs_3up.jpg" width="800px" height="400px">
   </div>

<div>
     <img src="iphone-4g-mockup-von-rino0815.jpg" width="800px" height="400px">
   </div>

<div>
     <img src="iphone-water1.jpg" width="800px" height="400px">
   </div>

<div>
     <img src="Mobiles-iPhone-Repair.jpg" width="800px" height="400px">
   </div>

<div>
     <img src="steve-jobs-holding-iphone.jpeg" width="800px" height="400px">
   </div>

<div>
     <img src="iphone-3g-preview.png" width="800px" height="400px">
   </div>

<div>
     <img src="iphone-sparks.png" width="800px" height="400px">
   </div>




</div>
</body>

幻灯片放映.css

#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 800px; 
    height: 400px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

编辑1

我将我的 jquery 代码放在一个外部 js 文件中，我在我的 html 中像这样引用该文件

<LINK REL=StyleSheet HREF="slideshow.css" TYPE="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript" src="slideshow.js">
</SCRIPT>

<div id="slideshow" style="align:center;">

   <div>
     <img src="htc-touch-diamond-versus-iphone-3g.jpg" width="800px" height="400px">
   </div>

它仍然无法正常工作并显示此错误...

("#slideshow > div:gt(0)").hide() 不存在

这是我的新 js 文件：-

$(document).ready(function(){

("#slideshow > div:gt(0)").hide();

setInterval(函数() { jQuery('#slideshow > div:first') .fadeOut(1000) 。下一个（） .fadeIn(1000) 。结尾（） .appendTo('#slideshow'); }, 3000); });

它有时也会在 $ 上给出一个参考错误，说“$ 未定义”

编辑-2

@Zahid..我已经在这里粘贴了我所有的代码..这就是我所拥有的..这 3 个文件，即 hTML、css 和 js。

我哪里错了？哪些语句需要在什么之后？我一无所知。有人可以在这里帮助我吗？我将不胜感激！

【问题讨论】：

这说明你的jquery文件没有正确加载或者你在jquery load语句之前写了这段代码。

标签： jquery html css slideshow

【解决方案1】：

我解决了这个问题。它是与 js 文件。这是代码。

$(document).ready(function(){
  $("#slideshow > div:gt(0)").hide();
  setInterval(function() {
    $("#slideshow > div:first")
      .fadeOut(1000)
      .next()
      .fadeIn(1000)
      .end()
      .appendTo("#slideshow");
  },3000);
});

【讨论】：

【解决方案2】：

发生这种情况是因为您没有使用回调。每个语句都是异步执行的。将代码放入回调中

【讨论】：

怎么做？：/我对这一切都很陌生。你能帮忙吗？
您需要在 document.ready 函数中包含 javascript 代码。或 window.load 函数。它的作用就像魅力
仍然不适合我..在我的最后它现在显示这个错误..("#slideshow > div:gt(0)").hide();不存在