Méthode de mise en œuvre du carrousel simple et pratique jQuery

Cet article présente principalement en détail la méthode de production de carrousel simple et pratique dans jquery. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Le développement WEB est souvent utilisé dans une situation où les éléments d'un conteneur sont lus et affichés en boucle, avec les invites de la barre de navigation correspondantes, car cela peut être utilisé dans de nombreux endroits et les fonctions sont donc très similaires. écrivez une fonction de lecture comme celle-ci et partagez-la. Il convient de noter que cela nécessite le support de jQuery. Vous pouvez la rechercher et la télécharger en ligne. Ce qui suit est résumé comme suit :

1. . Enregistrez les éléments suivants en tant que fichier indépendant itemPlayerApp.js :

//attend: this need jQuery.js support 
var itemPlayerApp={ 
 author:'shenzhenNBA', 
 version:'v1.0', 
 appMaxNum:0, 
 playData:'1xplay', 
 playerID:"", 
 speed:3000, 
 appPlay:function(){  
  var f=this.playData.toLowerCase().split('x'); 
  if(f[1]=='play'){ 
   var i; 
   try{i=parseInt(f[0]);}catch(e){i=0;} 
   if(i>=this.appMaxNum){i=0;}    
   this.appTab(i);   
   this.playData=(++i)+"xplay"; 
  }   
 }, 
 appTab:function(tabIndex){ 
  var k,j; 
  try{k=parseInt(tabIndex);}catch(e){k=0;}   
  for(j=0;j<this.appMaxNum;j++){    
   if(k==j){      
   $(&#39;#itemNav&#39;+j).css({&#39;background-color&#39;:&#39;#333333&#39;,&#39;color&#39;:&#39;#FFFFFF&#39;});     
   $(&#39;#item&#39;+j).show(&#39;fast&#39;);    
   }else{   
   $(&#39;#itemNav&#39;+j).css({&#39;background-color&#39;:&#39;#CCCCCC&#39;,&#39;color&#39;:&#39;#000000&#39;}); 
   $(&#39;#item&#39;+j).hide(&#39;fast&#39;);  
   } 
  }   
 }, 
 appActive:function(){ 
  var _this = this; 
  this.playerID = setInterval(function(){ _this.appPlay(); },this.speed); 
 }, 
 init:function(refContainerId,intervalTime,refWidth,refHeight){  
  var cid = "";  
  var w = 300; 
  var h = 200; 
  if(refContainerId == &#39;undefined&#39; || refContainerId == null || refContainerId == &#39;&#39;){ 
   return; 
  }else{ 
   cid = $.trim(refContainerId); 
  }  
  if(refWidth == &#39;undefined&#39; || refWidth == null || refWidth == &#39;&#39;){ 
   w = 300; 
  }else{ 
   w = parseInt(refWidth); 
  }  
  if(refHeight == &#39;undefined&#39; || refHeight == null || refHeight == &#39;&#39;){ 
   h = 200; 
  }else{ 
   h = parseInt(refHeight); 
  }  
   
  $(&#39;#&#39; + cid).css({"position":"relative",&#39;width&#39;:w,&#39;height&#39;:h,&#39;overflow&#39;:&#39;hidden&#39;}); 
  $(&#39;#&#39; + cid + "NavCon").css({&#39;color&#39;:&#39;#333333&#39;,&#39;height&#39;:&#39;26px&#39;,&#39;position&#39;:&#39;absolute&#39;,&#39;width&#39;:&#39;95%&#39;,&#39;left&#39;:&#39;0&#39;,&#39;bottom&#39;:&#39;3px&#39;,&#39;text-align&#39;:&#39;right&#39;,&#39;display&#39;:&#39;block&#39;}); 
  var t = 0; 
  if(intervalTime == &#39;undefined&#39; || intervalTime == null){ 
   t = 3000; 
  }else{ 
   try{ t = parseInt(intervalTime);}catch(e){ t = 3000;} 
  } 
  this.speed = t; 
  var navList = "#" + cid + "NavCon a"; 
  this.appMaxNum = $(navList).size(); 
  if(0 == this.appMaxNum){ return; } 
  var _this = this; 
  $(navList).each(function(i){ 
   $(this).css({&#39;padding&#39;:&#39;2px 5px&#39;,&#39;margin-right&#39;:&#39;2px&#39;,&#39;background-color&#39;:&#39;#CCCCCC&#39;}); 
   if(i == 0){ 
    $(this).css({&#39;background-color&#39;:&#39;#333333&#39;,&#39;color&#39;:&#39;#FFFFFF&#39;}); 
   }     
   $(this).mouseover(function(){ 
   _this.playData=i+&#39;xstop&#39;; 
   _this.appTab(i);  
   }); 
   $(this).mouseout(function(){ 
   _this.playData=i+&#39;xplay&#39;; 
   _this.appTab(i); 
   }); 
  }); 
 } 
};

2. Comment utiliser :

1 Introduisez le fichier jQery et ce fichier itemPlayerApp.js dans le. page Web que vous devez utiliser, par exemple :

2 . Créez un fichier HTML au format suivant

<p id="containerID">

<p id="containerIDNavCon">
<a id="itemNav0" class="item1" href="#">1</a>
<a id="itemNav1" class="item1" href="#">2</a>
<a id="itemNav2" class="item1" href="#">3</a>
</p>
<p id="containerIDItemCon">
<a id="item0" href="#"><img src="img/pic0.jpg" width="300" height="200"></a>
<a id="item1" href="#"><img src="img/pic1.jpg" width="300" height="200"></a>
<a id="item2" href="#"><img src="img/pic2.jpg" width="300" height="200"></a>
</p>
</p>

Remarque : parce que c'est aussi simple que possible, il est nécessaire de créer un format HTML approprié. Les principales exigences sont les suivantes. la partie couleur,

//A, id = containersIDNavCon et id = containersIDItemCon Le nombre d'éléments A connectés doit être égal
//B, la composition ID du conteneur de navigation doit être le conteneur principal ; ID plus NavCon, comme ci-dessus containersIDNavCon
//C, l'ID de chaque élément A dans le conteneur de navigation Il est composé de itemNav plus une séquence de nombres croissants à partir de 0, comme la partie verte ci-dessus
/ ; /D, affiche l'ID de chaque élément A dans le conteneur d'éléments. Il est composé de itemNav plus un nombre croissant à partir de 0. Séquence, comme la partie violette ci-dessus

3. dans la page WEB, initialisez et activez la fonction carrousel, par exemple :
window.onload=function(){
itemPlayerApp .init('containerID',3000,300,200);
itemPlayerApp.active() ;
}

3. L'exemple suivant

Si tous les fichiers sont placés dans un seul dossier de fichiers,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>TEST</title> 
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script language="javascript" type="text/javascript" src="itemPlayerApp.js"></script> 
<style type="text/css"> 
*{font-family:"宋体",verdana,arial; font-size:12px;color:#000000;} 
#playerBox{font-family:"宋体",verdana,arial; font-size:12px;color:#000000;} 
</style> 
</head> 
<body> 
<p id="playerBox" class="columnLeft01 box02"> 
<p id="playerBoxNavCon"> 
<a id="itemNav0" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a> 
<a id="itemNav1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a> 
<a id="itemNav2" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a> 
</p> 
<p id="playerBoxItemCon"> 
<a id="item0" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif" width="100%" height="200" border="0"></a> 
<a id="item1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="http://csdnimg.cn/www/images/csdnindex_logo.gif" width="100%" height="200" border="0"></a> 
<a id="item2" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="http://avatar.csdn.net/5/1/9/1_shenzhennba.jpg" width="100%" height="200" border="0"></a> 
</p> 
</p> 
<p> </p> 
<p>项目循环轮播功能</p> 
<script language="javascript" type="text/javascript"> 
window.onload=function(){ 
itemPlayerApp.init('playerBox',3000,300,200); 
itemPlayerApp.appActive(); 
} 
</script> 
</body> 
</html>

Astuce : veuillez télécharger le fichier jQuery.js. en ligne.
Utilisez-le simplement en cas de besoin.

Recommandations associées :

Un exemple de tutoriel d'utilisation de H5 pour implémenter un carrousel (version à écran tactile)

Introduction détaillée Comment utiliser H5 pour implémenter un carrousel à écran tactile

Vous apprendre étape par étape comment implémenter un carrousel à l'aide de jQyery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!