jquery obtient la valeur d'index d'élément actuelle en utilisant example

jquery obtient la valeur d'index d'élément actuelle en utilisant example_jquery

WBOY

Libérer： 2016-05-16 15:56:17

original

1294 Les gens l'ont consulté

L'exemple de cet article décrit l'utilisation de jquery pour obtenir la valeur actuelle de l'index de l'élément. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Lorsque vous effectuez l'effet de rotation de l'image sur la page de promotion aujourd'hui, le côté gauche du numéro de page ci-dessous doit afficher les informations de description de l'image. L'effet est le suivant :

Choses :

Lorsque la partie de page est dans l'état actuel, le style "actif" sera ajouté.

En obtenant la valeur d'index de li class="active", les informations de description d'image correspondantes sont trouvées et affichées.

Solution :

Cet effet peut être facilement obtenu grâce à l'index() de jquery.

Le code est le suivant :

HTML :

<div id="carousel"> 
  <div id="carouselimg"> 
 <div id="imgcontainer"> 
   <a href="#" mce_href="#"><img src="" /></a> 
   <a href="#" mce_href="#"><img src="" /></a> 
   <a href="#" mce_href="#"><img src="" /></a> 
   <a href="#" mce_href="#"><img src="" /></a> 
   <a href="#" mce_href="#"><img src="" /></a> 
 </div> 
  </div> 
  <div id="carouseltitle"> 
 <div class="carouseltext"> 
   <span> </span> 
   <span> </span> 
   <span> </span> 
   <span> </span> 
   <span> </span> 
 </div> 
 <ul> 
   <li><span>1</span></li> 
   <li><span>2</span></li> 
   <li><span>3</span></li> 
   <li><span>4</span></li> 
   <li><span>5</span></li> 
 </ul> 
  </div> 
</div>

Copier après la connexion

JavaScript :

<SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></SCRIPT> 
<SCRIPT type=text/javascript>  
var carousedata = [ 
  {index:0,link:"http://www.dangdang.com",imgsrc:"1.jpg",text:"数千款名品手机6折起"}, 
  {index:1,link:"http://www.baidu.com",imgsrc:"2.jpg",text:"测试文本2"}, 
  {index:2,link:"http://www.google.com",imgsrc:"3.jpg",text:"测试文本3"}, 
  {index:3,link:"http://www.soso.com",imgsrc:"xf.jpg",text:"测试文本4"}, 
  {index:4,link:"http://www.jb51.net",imgsrc:"py.jpg",text:"测试文本5"} 
]; 
$(document).ready(function(){ 
  $("#imgcontainer a").each(function(i){ 
 $(this).attr("href",carousedata[i].link); 
 $(this).children("img").attr("src",carousedata[i].imgsrc); 
  }); 
  $(".carouseltext span").each(function(i){ 
 $(this).text(carousedata[i].text); 
  }) 
  setInterval(function(){ 
 var li_index = $("#carouseltitle ul li").index($("#carouseltitle ul li.active")[0]); 
 $(".carouseltext span").hide(); 
 $(".carouseltext span").eq(li_index).show(); 
  },10); 
}); 
</script>

Copier après la connexion

Ici, j'utilise setinterval et je recherche toutes les 10 ms.

Il existe des domaines dans lesquels ce code peut être optimisé.

J'espère que cet article sera utile à la programmation jQuery de chacun.