0

我遇到的问题是它只快速显示 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 文件：-

$(文档).ready(函数(){

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

setInterval(function() { jQuery('#slideshow > div:first') .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo('#slideshow'); }, 3000); });

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

编辑-2

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

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

4

2 回答 2

1

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

$(document).ready(function(){
  $("#slideshow > div:gt(0)").hide();
  setInterval(function() {
    $("#slideshow > div:first")
      .fadeOut(1000)
      .next()
      .fadeIn(1000)
      .end()
      .appendTo("#slideshow");
  },3000);
});
于 2012-08-02T10:15:30.177 回答
0

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

于 2012-08-02T07:34:38.490 回答