0

私が抱えている問題は、2〜3枚の画像がすばやく表示され、画像のスライドが停止し、1枚の画像で停止することです。以下の私のコードの何が問題になっているのかを理解するのを手伝ってください：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（function（）{jQuery（'＃slideshow> div：first'）.fadeOut（1000）.next（）.fadeIn（1000）.end（）.appendTo（'＃slideshow'）;}、3000）; }）;

また、「$が定義されていません」という$の参照エラーが発生することもあります。

編集-2

@ Zahid ..ここにすべてのコードを貼り付けました..これですべてです..これらの3つのファイル、つまりhTML、css、js用です。

どこが間違っているのですか？どのステートメントが何の後に来る必要がありますか？私は無知です。誰かがここで私を助けてくれますか？私は非常に感謝されます！

4

2 に答える 2

1

I solved the problem. It was with js file. Here's the code. 

$(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 に答える