Le code jQuery réalise un effet de commutation de fondu d'entrée et de sortie automatique + manuel de l'image wall

Le code jQuery réalise un effet de commutation de fondu d'entrée et de sortie automatique + manuel de l'image wall_jquery

WBOY

Libérer： 2016-05-16 15:01:32

original

1440 Les gens l'ont consulté

Lecture connexe :

Code Jquery pour implémenter l'effet carrousel d'images (1)

Vous pouvez souvent voir l'effet de fondu automatique des images d'arrière-plan sur les pages Web, ce qui est très beau et très pratique. Aujourd'hui, je vais prendre le temps de partager avec vous l'effet de commutation de fondu d'entrée et de sortie automatique + manuel du mur d'images basé sur le code jquery. Apprenons ensemble !

Je vais d'abord vous montrer les rendus. Si vous pensez que c'est bon, veuillez vous référer au code d'implémentation spécifique.

Ajoutez un div (class=container) et définissez la largeur et la hauteur. Ici, la largeur est de 800 px et la hauteur est de 450 px. Ajoutez un positionnement centré. Ajoutez une liste ul (class="img") au div pour contenir l'image. Définissez la position de la balise li dans l'ul sur absolue. À ce stade, les images se chevaucheront et définiront l'affichage sur aucun. L'image définit la largeur et la hauteur pour qu'elles soient identiques à celles du conteneur. Ajoutez une autre liste ul au conteneur pour contenir la rangée de chiffres ci-dessous, puis positionnez et définissez en conséquence. Ajoutez deux divs : gauche et droite, qui sont respectivement les boutons gauche et droit, et effectuez le positionnement et les paramètres correspondants. Les flèches à l'intérieur sont respectivement le signe supérieur à et le signe inférieur à.

Introduction aux idées et principes de mise en œuvre :

Lorsque la souris passe sur le numéro correspondant, utilisez $(this).index() pour obtenir le numéro de série dans le conteneur où se trouve le numéro, puis transmettez le numéro de série à la fonction eq() pour obtenir le li label, puis ajoutez la fonction fadeIn( ); De cette façon, l'image cachée est affichée et sibling().fadeOut() est appelée en même temps pour masquer les nœuds frères au même niveau, de sorte que l'image précédemment affichée l'image est cachée.

Ajoutez la fonction setInterval() pour changer l'image en même temps.

Je pense qu'un problème majeur est le conflit entre la commutation automatique et la commutation manuelle qui doit être arrêtée lorsque la souris passe sur l'image. La méthode utilisée ici est la suivante :
.

Ajoutez une fonction de survol au conteneur. Lorsque la souris se déplace dans le conteneur, utilisez la fonction clearInterval() pour supprimer la fonction d'intervalle de temps. De cette façon, lorsque la souris se déplace sur l'image, l'image ne changera pas. Ajoutez-le lorsque la souris sort. Fonction setInterval(). De cette façon, les images peuvent continuer à changer.

Remarque : i et t doivent être définis comme variables globales afin que différentes fonctions puissent être partagées. i représente l'index de l'image actuellement affichée. t est l'ID de setInterval. Lorsque la souris sort, il n'est pas nécessaire de var a t, il suffit de : t=setInterval(time_fun,1500);.

eq(n) : Trouver le nième élément

par exemple : $('li').eq(2).css('background-color', 'red');//Définissez la couleur d'arrière-plan de la deuxième balise li sur rouge

index() : Trouver la valeur d'index de l'élément

Si vous êtes intéressé, étudiez le code :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-">
<title>jquery_img_switch</title>
</head>
<style type="text/css">
*{
margin: ;
padding: ;
}
.container{
width: px;
height: px;
margin: px auto;
position: relative;
}
.container .img{
list-style: none;
/*position: absolute;*/
}
.container .img li{
position: absolute;
display: none;
}
.container .img img{
width: px;
height: px;
}
.container .num{
position: absolute;
list-style: none;
font-size: ;
bottom: px;
width: %;
text-align: center; 
}
.container .num li{
width: px;
height: px;
background: rgba(,,,.);
border-radius: %;
color: #;
display: inline-block;
line-height: px;
text-align: center;
font-size: px;
margin-right: px;
cursor: pointer;
}
.left, .right{
width: px;
height: px;
text-align: center;
line-height: px;
background-color: rgba(,,,.);
color: #fff;
position: absolute;
top: %;
margin-top: -px; 
font-size: px;
cursor: pointer;
}
.left{
left: px;
}
.right{
right: px;
}
.container .num .active{
background: rgba(,,,);
color: #fff;
}
</style>
<script type="text/javascript" src="../jquery-...min.js"></script>
<script type="text/javascript">
var i=;
var t;
$(document).ready(function(){
$(".container .img li").eq(i).fadeIn().siblings().fadeOut(); 
$(".container .num li").on("mouseover",active);
t=setInterval(time_fun,);
$(".container").hover(in_fun,out_fun);
$(".container .left").on("click",left_fun);
$(".container .right").on("click",right_fun);
});
function time_fun(){
i++;
if(i==){
i=;
}
$(".container .num li").eq(i).addClass("active").siblings().removeClass("active");
$(".container .img li").eq(i).fadeIn().siblings().fadeOut();
}
function in_fun(){
clearInterval(t);
}
function out_fun(){
t=setInterval(time_fun,);
}
function active(){
$(this).addClass("active").siblings().removeClass("active");
$(".container .img li").eq($(this).index()).fadeIn().siblings().fadeOut();
i=$(this).index();
}
function left_fun(){
i--;
if(i==-){
i=;
}
$(".container .num li").eq(i).addClass("active").siblings().removeClass("active");
$(".container .img li").eq(i).fadeIn().siblings().fadeOut();
}
function right_fun(){
i++;
if(i==){
i=;
}
$(".container .num li").eq(i).addClass("active").siblings().removeClass("active");
$(".container .img li").eq(i).fadeIn().siblings().fadeOut();
}
</script>
<body>
<div class="container">
<ul class="img">
<li ><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
</ul>
<ul class="num">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="left"><</div>
<div class="right">></div>
</div>
</body>
</html>

Copier après la connexion

Ce qui précède est le code jQuery présenté par l'éditeur pour réaliser l'effet de commutation automatique + manuel de fondu d'entrée et de sortie du mur d'images. J'espère que cela vous sera utile en même temps. merci également beaucoup pour votre soutien au site Script House !