Comment implémenter l'effet carrousel d'images-js tutoriel-php.cn

Comment implémenter l'effet carrousel d'images

小云云

Libérer： 2018-01-12 10:43:54

original

4390 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!