Maison > Article > interface Web > Comment implémenter l'effet carrousel d'images
Comment implémenter l'effet carrousel d'images
- 小云云original
- 2018-01-12 10:43:544295parcourir
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 :
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!