1

我正在用 jQuery 编写一个滑块。

它有效，但我有一个问题，当我的滑块与我的 2 个元素一起滑动时，我在这 2 个元素之间有一个空白区域和一个“滞后”（滞后，小运动..），我不知道如何删除它。

在这里，html代码：

 <div class="wrapperActusSlide">
<div class="numActusSlide"><span class="rien">20</span></div>
<div class="imgActusSlide"><img src="bamboo_orchestra_act.jpg" alt="Le Quintette Bamboo Orchestra" width="385px" height="254px" /></div>
   <div class="wrapperInnerImgActuSlide">
      <span class="goToEvt"><a href="quintette_bamboo_orchestra.html">Aller à l'évènement</a></span>
      <div class="resume">
         <h3><a href="quintette_bamboo_orchestra.html">Quintette Bamboo Orchestra</a></h3>
         <p>Samedi 29 septembre</p>
   </div>
</div>

</div><div class="wrapperActusSlide">
<div class="numActusSlide"><span class="rien">18</span></div>
<div class="imgActusSlide"><img src="bateau_nino_act.jpg" alt="Le Bateau de Nino" width="385px" height="254px" /></div>
   <div class="wrapperInnerImgActuSlide">
      <span class="goToEvt"><a href="le_bateau_de_nino.html">Aller à l'évènement</a></span>
      <div class="resume">
         <h3><a href="le_bateau_de_nino.html">Le Bateau de Nino</a></h3>
         <p>Vendredi 12 octobre</p>
   </div>
</div>

</div><div class="wrapperActusSlide">
<div class="numActusSlide"><span class="rien">20</span></div>
<div class="imgActusSlide"><img src="clan_des_divorcees_act.jpg" alt="Le Clan des divorcées" width="385px" height="254px" /></div>
   <div class="wrapperInnerImgActuSlide">
      <span class="goToEvt"><a href="le_clan_des_divorcees.html">Aller à l'évènement</a></span>
      <div class="resume">
         <h3><a href="le_clan_des_divorcees.html">Le Clan des divorcées</a></h3>
         <p>Vendredi 19 octobre</p>
   </div>
</div>

</div>

在这里，jQuery 代码：

var timer;

$(document).ready(function() {
  //On fait floater
  $(".wrapperActusSlide").css("float","left"); 


  fermeTout();
  affichePremier();  
  timer = setTimeout('afficheTime()',5000);

  //Click sur une actu
  $('.numActusSlide').click(function(){
    if($(this).parent().attr('class') == "wrapperActusSlide actif"){
        fermeActif();      
    }
    else{
        fermeActif();
        afficheClick($(this).parent());
    }     
  });   
}); 

function afficheTime(){ 
    afficheSuivant();
    timer = setTimeout('afficheTime()',5000);
}

function afficheClick(element){
  //on affiche l'élement cliqué
  element.stop().animate({"width": "384px"}, 1000);
  element.children(".imgActusSlide").stop().animate({"width": "384px"}, 1000).css('display','block');
  ouvre(element);
  window.clearTimeout(timer);
}

function afficheSuivant(){
    var indice = 99;
    var indiceMax = $(".wrapperActusSlide").size();

    //on affiche le suivant
    $(".wrapperActusSlide").each(function(index){       
        if($(this).attr('id') == "actif"){ 
            indice = index+1;
        }       
        if(indice >= indiceMax){
            indice = 0;
        }
    });


    $(".wrapperActusSlide").each(function(index){       
        if(indice == index){ 
            fermeActif();
            $(this).stop().animate({"width": "384px"}, 2000);
            $(this).children(".imgActusSlide").stop().animate({"width": "384px"}, 2000).css('display','block');
            ouvre($(this));
        }            
    });
}

function affichePremier(){
  //on affiche le premier
  $(".wrapperActusSlide").each( function(index){
    if(index == 0){
        $(this).stop().animate({"width": "384px"}, 1000);
        $(this).children(".imgActusSlide").stop().animate({"width": "384px"}, 1000).css('display','block');
        ouvre($(this));
    }
  });  
}

function fermeTout(){
    //on retrecit les autres
    $(".wrapperActusSlide").each( function(){
    $(this).css('width','28px');
    $(this).children(".imgActusSlide").css('width', "28px").css('overflow','hidden');
    ferme($(this));
  });
}

function fermeActif(){
    //on retrecit les autres
    $("#actif").css('width','28px');
    $("#actif").children(".imgActusSlide").css('width','28px').css('overflow','hidden');
    ferme($("#actif"));
}

function ferme(mon_div){
  //On fait disparaitre les textes
  $(mon_div).children(".wrapperInnerImgActuSlide").css('display','none');
  $(mon_div).children(".numActusSlide").show();
  $(mon_div).removeClass('actif');
  $(mon_div).removeAttr('id');
}

function ouvre(mon_div){
  //On fait apparaitre les textes
  $(mon_div).children(".wrapperInnerImgActuSlide").css('display','block').fadeIn(2000);
  $(mon_div).children(".numActusSlide").hide();
  $(mon_div).addClass('actif');
  $(mon_div).attr('id','actif');
}

如果你能重现这个问题，你能帮我吗？

4

0 回答 0