Le bouton Suivant et Précédent ne fonctionne pas lorsque vous cliquez sur les deux

Question

J'essaie d'utiliser le curseur de bannière avec la valeur jquery.currentBanner augmenter et diminuer lorsque je clique sur le bouton mais la bannière ne change pas.

SCRIPT:

$(document).ready(function() { 
    var currentBanner = 0; 
    $("#prev").bind("click", function() { 
     currentBanner -= 1; 
     $("#banner_div img").eq(currentBanner).fadeIn("slow"); 
    }); 

    $("#next").bind("click",function() { 
     currentBanner += 1; 
     $("#banner_div img").eq(currentBanner).fadeIn("slow"); 
    }); 

    $("#banner_div img").eq(currentBanner).css("display", "block"); 
}); 

HTML:

<a href="#" id="next>next</a> 
<a href="#" id="prev">prev</a> 
<div id="banner_div"> 
    <img src="image1.jpg" alt="" /> 
    <img src="image2.jpg" alt="" /> 
    <img src="image3.jpg" alt="" /> 
    <img src="image4.jpg" alt="" /> 
</div> 

Answer 1

Dès le départ

<a href="#" id="next>next</a> 

manque la parenthèse fermante pour votre attribut id:

<a href="#" id="next">next</a> 

---

Here's a jsFiddle demo of what I would do.

jQuery:

$(document).ready(function() { 

    var $images = $("#banner_div img"), 
     totalImages = $images.length, 
     currentIndex = 0; 

    $images.eq(currentIndex).fadeIn("slow"); 

    $("#prev").on("click", function() { 
     if (currentIndex > 0) { 
      $images.eq(currentIndex).stop(true,true).hide(0); 
      currentIndex -= 1; 
      $images.eq(currentIndex).stop(true,true).fadeIn("slow"); 
     } 
    }); 

    $("#next").on("click",function() { 
     if (currentIndex < totalImages-1) { 
      $images.eq(currentIndex).stop(true,true).hide(0); 
      currentIndex += 1; 
      $images.eq(currentIndex).stop(true,true).fadeIn("slow"); 
     } 
    }); 

});​ 

CSS:

#banner_div img { display: none; }​ 

Answer 2

utilisation Methode $ (sélecteur) .show ("fade") et $ (sélecteur) .hide (» fondu ")

$(document).ready(function() { 
    var currentBanner = 0; 
    $("#banner_div img").hide(); 
    $("#banner_div img").eq(currentBanner).show("fade"); 

    $("#prev").bind("click", function() { 
     $("#banner_div img").eq(currentBanner).hide("fade"); 
     decrease(currentBanner); 
     $("#banner_div img").eq(currentBanner).show("fade"); 
    }); 

    $("#next").bind("click",function() { 
     $("#banner_div img").eq(currentBanner).hide("fade"); 
     increase(currentBanner); 
     $("#banner_div img").eq(currentBanner).show("fade"); 
    }); 

});  

lorsque augmenter et diminuer vérifier currentBanner entre 0 et les bannières comptent.

function increase(n){ 
    n++; 
    if(n >= $("#banner_div img").length) 
     n=0; 
} 
function decrease(n){ 
    n; 
    if(n < 0) 
     n=$("#banner_div img").length -1; 
} 

Answer 3

Version compacte du code de Morteza:

$(document).ready(function() { 
    var currentBanner = 0; 
    $("#banner_div img").eq(currentBanner).show("fade"); 

    $("#prev").bind("click", function() { 
     $("#banner_div img").eq(currentBanner--).hide("fade").prev().show("fade"); 
    }); 

    $("#next").bind("click",function() { 
     $("#banner_div img").eq(currentBanner++).hide("fade").next().show("fade"); 
    }); 
});