jadeをfadeInとfadeOutで使用してイメージスライダーを作成する方法

私はHTMLに3つのイメージを持ち、jQueryを使ってスライダーを作ろうとしました。以下はHTMLからjQueryへの私のコードです。jadeをfadeInとfadeOutで使用してイメージスライダーを作成する方法

<html> 
    <head> 
     <title>Awesome Website</title> 
     <link rel="stylesheet" href="main.css"> 
     <script type="text/javascript" src="jquery-2.2.4.min.js"></script> 
    </head> 
    <body>  
     <div class="wrapper"> 
      <section id="slider"> 
       <img id="1" src="http://www.hdbloggers.net/wp-content/uploads/2016/01/Background.png" alt="Important Images"> 
       <img id="2" src="http://www.planwallpaper.com/static/images/6935544-blue-backgrounds-hd.jpg" alt="PIGS"> 
       <img id="3" src="http://watermarked.cutcaster.com/cutcaster-photo-100482846-Blue-Technology-Background.jpg" alt="ROADS will be here"> 
      </section> 
       <a href="" class="left">Previous</a> 
       <a href="" class="right">Next</a> 
     </div>     
     <script src="js/jquery-2.2.4.min.js"></script> 
     <script src="js/slider.js"></script> 
    </body> 
</html>

CSS：

.wrapper{ 
     width: 100%; 
     margin:0 auto 
    } 
    html,body{ 
     height: 100%; 
     width: 100%; 
    } 
    img{ 
     position: absolute; 
     width:100%; 
     height: 100%; 
     display:hidden; 
    } 
    #slider{ 
     position:relative; 
     width: 100%; 
     height: 600px; 
     display:hidden; 
    } 
    #slider img{ 
     display:none; 
    } 
    .wrapper a{ 
     padding: 5px 10px; 
     background-color:blue; 
    } 
    a.left{ 
    top:50%; 
    bottom:50%; 
    float:left; 
    } 
    a.right{ 
    float:right; 
    }

私のjQueryによると、私は画像ごとに3秒をスライドさせるつもりが、残念ながらそれだけで最初の画像を示しています。 3秒後に消え、容器は空になる。それがフェードアウトして何も消えることを意味します。

sliderInt = 1; 
sliderNext = 2; 
$(document).ready(function(){ 
    $("#slider > img#1").fadeIn(300) ; 
    startSlider();   
}); 
function startSlider(){ 
    loop = setInterval(function(){  
    if(sliderNext > count){ 
     sliderNext = 1; 
     sliderInt = 1; 
    } 
    $("#slider > img").fadeOut(300); 
    $("#slider > img#1" + sliderNext).fadeIn(300);  
    sliderInt = sliderNext; 
    sliderNext = sliderNext + 1;  
    },3000) 
}

イメージをフェードインまたはフェードインする方法を教えてください。

出典

2016-06-01 Wosley Alarico

明らかに、最初の画像がまだフェードインしています。これは同じ結果を出した試した方法です： $（ "＃slider img＃1" + sliderNext）正しい方法は何でしょうか？何があなたを教えてください https://jsfiddle.net/Wosley_Alarico/j4qnu7b0/ –

何もjsfiddleに表示されていないが、それは、リンクを行くいくつかの理由https://jsfiddle.net/ – l2aelba

でのライブのために、あなたのコードを追加してください変更されて、間違いがあったところで、大きなコードブロックはあまり役に立ちません。 –

正しいコードを見つけてください。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Awesome Website</title> 
    <style> 
     .wrapper 
     { 
      width: 100%; 
      margin: 0 auto; 
     } 
     html, body 
     { 
      height: 100%; 
      width: 100%; 
     } 
     img 
     { 
      position: absolute; 
      width: 100%; 
      height: 100%; 
      display: hidden; 
     } 
     #slider 
     { 
      position: relative; 
      width: 100%; 
      height: 600px; 
      display: hidden; 
     } 
     #slider img 
     { 
      display: none; 
     } 
    </style> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script> 
</head> 
<body> 
    <div class="wrapper"> 
     <section id="slider"> 
      <img id="1" src="http://www.hdbloggers.net/wp-content/uploads/2016/01/Background.png" 
       alt="Important Images"> 
      <img id="2" src="http://www.planwallpaper.com/static/images/6935544-blue-backgrounds-hd.jpg" 
       alt="PIGS"> 
      <img id="3" src="http://watermarked.cutcaster.com/cutcaster-photo-100482846-Blue-Technology-Background.jpg" 
       alt="ROADS will be here"> 
     </section> 
     <a href="" class="left">Previous</a> <a href="" class="right">Next</a> 
    </div> 
    <script> 
     var sliderInt = 1; 
     var sliderNext = 2; 
     var count = $("#slider > img").length; 
     $(document).ready(function() { 
      $("#slider > img#1").fadeIn(300); 
      startSlider(); 
     }); 
     function startSlider() { 
      loop = setInterval(function() { 
       if (sliderNext > count) { 
        sliderNext = 1; 
        sliderInt = 1; 
       } 
       $("#slider > img").fadeOut(300); 
       $("#slider > img#" + sliderNext).fadeIn(300); 
       sliderInt = sliderNext; 
       sliderNext = sliderNext + 1; 
      }, 3000) 
     } 
    </script> 
</body> 
</html>

場合は任意のヘルプは、この回答にコメント。あなたが意図したものが得られたら、この答えに間違いを記入してください。

出典

2016-06-01 13:31:09 Sagar

： – chrki

あなたは非常に小さなものを変更しましたが、実際には理由を理解できませんでした。説明できますか？ –

私はこの行を追加しました：var count = $（ "＃slider> img"）。次の行を修正しました：$（ "＃slider> img＃" + sliderNext）.fadeIn（300）; – Sagar

jqueryのコードは、以下によって置換されるべきである：2行目

sliderInt = 1; 
    sliderNext = 2; 
    $(document).ready(function(){ 
    $("#slider > img#1").fadeIn(30); 
     startSlider(); 
    }); 
    function startSlider(){ 
    count = $("#slider > img").size(); 
    loop = setInterval(function(){  
    if(sliderNext > count){ 
     sliderNext = 1; 
     sliderInt = 1; 
    } 

    $("#slider > img").fadeOut(300); 
    $("#slider > img#" + sliderNext).fadeIn(300);  
    sliderInt = sliderNext; 
    sliderNext = sliderNext + 1;  
    }, 3000) 
}

} if文の後に、IMGは1（IMG＃1）のIDを持っていますが、単にことができませんimg＃。

出典

2016-06-01 14:01:32

jadeをfadeInとfadeOutで使用してイメージスライダーを作成する方法

答えて

関連する問題