Maison >interface Web >js tutoriel >Comment implémenter l'effet carrousel d'images

Comment implémenter l'effet carrousel d'images

小云云original: 2018-01-12 10:43:544367parcourir

Comment réaliser l'effet carrousel d'images ? Cet article présente principalement le principe de production et le code d'implémentation de JQuery pour réaliser l'effet carrousel d'images. Le téléchargement du code source est joint à la fin de l'article, qui a une bonne référence. valeur. Jetons un coup d'œil avec l'éditeur ci-dessous, j'espère que cela pourra aider tout le monde.

Il est vraiment pratique d'utiliser JQuery pour faire fonctionner le DOM, et JQuery fournit une API très conviviale pour répondre à nos différents besoins, simplifiant considérablement le code js.

Principe de production :

Voici une brève description de l'ensemble du processus :

1. Masquer toutes les images sauf la première

2. Les informations alt de la première image sont affichées dans la barre d'information, et les événements de clic

3 sont ajoutés, les écouteurs de clic sont ajoutés pour les 4 boutons, cliquez sur les boutons correspondants et utilisez les méthodes fadeOut et fadeIn pour afficher le image

4. Définissez setInterval et exécutez la fonction de commutation régulièrement

Description du code :

filter(":visible") : Obtenez tous les éléments visibles

unbind() : De la correspondance Supprimez l'événement lié dans l'élément

frères et sœurs : Obtenez un ensemble d'éléments contenant tous les éléments frères et sœurs uniques de chaque élément dans l'ensemble d'éléments correspondant

Code source du programme

Partie HTML :

<body>
<p id="banner"> 
 <p id="banner_bg"></p>
 <p id="banner_info"></p>
 <ul>
  <li class="on">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
 </ul>
 <p id="banner_list">
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="imgs/img_1.jpg" title="图片" alt="图片"/></a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="imgs/img_2.jpg" title="图片" alt="图片"/></a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="imgs/img_3.jpg" title="图片" alt="图片"/></a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="imgs/img_4.jpg" title="图片" alt="图片"/></a>
 </p>
</p>
</body>

Partie CSS :

<style type="text/css">
#banner {position:relative; width:478px; height:286px; border:1px solid #666; overflow:hidden;}
#banner_list img {border:0px;}
#banner_bg {position:absolute; bottom:0;background-color:#000;height:30px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000;
cursor:pointer; width:478px;}
#banner_info{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}
#banner_text {position:absolute;width:120px;z-index:1002; right:3px; bottom:3px;}
#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; border:1px solid #fff;z-index:1002;
   margin:0; padding:0; bottom:3px; right:5px;}
#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background:#6f4f67;cursor:pointer}
#banner ul li.on { background:#900}
#banner_list a{position:absolute;}
</style>

Code javascript :

<script type="text/javascript">
 var t = n =0, count;
 $(document).ready(function(){ 
  count=$("#banner_list a").length;
  $("#banner_list a:not(:first-child)").hide();
  $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
  $("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});
  $("#banner li").click(function() {
   var i = $(this).text() -1;//获取Li元素内的值，即1，2，3，4
   n = i;
   if (i >= count) return;
   $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
   $("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})
   $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
   document.getElementById("banner").style.background="";
   $(this).toggleClass("on");
   $(this).siblings().removeAttr("class");
  });
  t = setInterval("showAuto()", 4000);
  $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
 })
 
 function showAuto()
 {
  n = n >=(count -1) ?0 : ++n;
  $("#banner li").eq(n).trigger('click');
 }
</script>

Recommandations associées :

Tutoriel sur la façon d'implémenter la fonction de changement de carrousel d'images à l'aide du composant de balayage WeChat Xiaocheng

Un exemple simple d'utilisation de JavaScript pour implémenter l'effet de carrousel d'images

Comment l'implémenter avec jQuery et CSS Un exemple simple d'effet carrousel d'images

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!

JavaScript jquery css html Filter JS 事件 dom

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Tutoriel sur la façon dont jQuery peut exécuter automatiquement un événement après le chargement du document HTMLArticle suivant：Tutoriel sur la façon dont jQuery peut exécuter automatiquement un événement après le chargement du document HTML

Articles Liés

Voir plus