JavaScriptのスライドショーが動作しません（画像は静的です）

-2

JavaScriptが新しく、スライダーを実装しようとしています。以下は私が解決しようとしているJavaScriptコードです。JavaScriptのスライドショーが動作しません（画像は静的です）

<html> 
 
    <head> 
 
    <title> Home Page </title> 
 
    <script type="text/javascript" src="w3.js"> 
 
     $("#slideshow > div:gt(0)").hide(); 
 

 
     setInterval(function() { 
 
     $('#slideshow > div:first') 
 
      .fadeOut(1000) 
 
      .next() 
 
      .fadeIn(1000) 
 
      .end() 
 
      .appendTo('#slideshow'); 
 
     }, 3000); 
 
    </script> 
 
    </head> 
 
    <body> 
 
    <div id="slideshow"> 
 
     <div> 
 
     <img src="http://vectorlogofree.com/wp-content/uploads/2014/04/23656-apple-logo-icon-vector-icon-vector-eps.png"> 
 
     </div> 
 
     <div> 
 
     <img src="http://vignette4.wikia.nocookie.net/memoryalpha/images/0/02/Linux_icon.png/revision/latest?cb=20141003183250&path-prefix=en"> 
 
     </div> 
 
     <div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

それが動作していないとイメージは静的です。どんな考え？事前に助けてくれてありがとう。

出典

2017-12-05 Jamie

何がうまくいかないの？ – Liam

。

<html> 
    <head> 
    <title> 
     Home Page 
    </title> 
    <!-- here --> 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
    <script type="text/javascript"> 
     $("#slideshow > div:gt(0)").hide(); 

     setInterval(function() { 
     $('#slideshow > div:first') 
      .fadeOut(1000) 
      .next() 
      .fadeIn(1000) 
      .end() 
      .appendTo('#slideshow'); 
     }, 3000); 
    </script> 
    </head> 
    <body> 
    <div id="slideshow"> 
     <div> 
     <img src="http://vectorlogofree.com/wp-content/uploads/2014/04/23656-apple-logo-icon-vector-icon-vector-eps.png"> 
     </div> 
     <div> 
     <img src="http://vignette4.wikia.nocookie.net/memoryalpha/images/0/02/Linux_icon.png/revision/latest?cb=20141003183250&path-prefix=en"> 
     </div> 
     <div> 
     </div> 
    </div> 
    </body> 
</html>

あなたのスタイルの問題を解決するために@Jiibの答えをチェックすると、完了します。

出典

2017-12-05 10:22:25

ありがとう！これは私のために働いた！ – Jamie

あなたの親と子要素に次のCSSを追加した場合は、ポジショニングに問題が固定されている：

CSS：

#slideshow { 
    position: relative; 
} 

#slideshow > div{ 
    position: absolute; 
}

ここではデモです： https://jsfiddle.net/cjd5ja7d/2/

しかし、スライドショーに外部jqueryプラグインを使用することを検討しましたか？は、ここでいくつかの素晴らしい例です：

https://bxslider.com/（使いやすい）
http://idangero.us/swiper/（より高度な）

jqueryの

出典

2017-12-05 09:56:11 JiiB

JavaScriptのスライドショーが動作しません（画像は静的です）

答えて

関連する問題