Implémenter un effet de changement d'image basé sur les compétences javascript

Implémenter un effet de changement d'image basé sur les compétences javascript_javascript

WBOY

Libérer： 2016-05-16 15:05:08

original

1318 Les gens l'ont consulté

L'exemple de cet article partage avec vous l'effet du changement d'image en utilisant js pour votre référence. Le contenu spécifique est le suivant
. Utilisez js pour obtenir l'effet de cliquer sur un bouton et de changer d'image :

<div class="box" id="box">
    <div class="img_box" id="img_box">
      <img src="../raw/b1.jpg" class="image" >
      <img src="../raw/b2.jpg" class="image" >
      <img src="../raw/b3.jpg" class="image" >
      <img src="../raw/b4.jpg" class="image" >
    </div>
    <div id="left" class="switch"></div>
    <div id="right" class="switch"></div>
  </div>

Copier après la connexion

Structure : Utilisez un div avec une largeur et une hauteur fixes comme conteneur le plus à l'extérieur, définissez le débordement sur caché,

Ensuite, la largeur de l'img_box interne est définie sur quatre fois la largeur de la boîte, et la hauteur est la même, c'est-à-dire qu'il y a quatre img dans l'img_box, mais un seul est visible. ci-dessous, gauche et droite, sont implémentés sous forme de boutons. Cliquez pour changer d'image signifie changer l'attribut gauche de img_box, donc img_box doit définir la position sur absolue. Pour plus de commodité, la position de la boîte est définie sur relation, de sorte que. l'img_box est positionné par rapport à la boîte. Les quatre images sont définies pour flotter comme à gauche, et la largeur et la hauteur sont les mêmes que celles de la boîte.

Code CSS :

*{
  margin: 0;
  padding: 0;
}
.box{
  width: 800px;
  height: 400px;
  margin: 20px auto;
  position: relative;
  overflow: hidden;
}
.img_box{
  height: 400px;
  width: 3200px;
  position: absolute;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
}
img{
  width: 800px;
  height: 400px;
  float: left;
}
.switch{
  width: 200px;
  height: 100%;
  position: absolute;

}
#left{
  left: 0px;
  top: 0px;
  background: -moz-linear-gradient(left, rgba(84, 84, 84, 0.50), rgba(20%,20%,20%,0));
  background: -webkit-linear-gradient(left, rgba(84, 84, 84, 0.50), rgba(20%,20%,20%,0));
}
#right{
  right:0px;
  top: 0px;
  background: -moz-linear-gradient(left, rgba(20%,20%,20%,0), rgba(84, 84, 84,0.5));
  background: -webkit-linear-gradient(left, rgba(20%,20%,20%,0), rgba(84, 84, 84,0.5));
}
#left:hover{
  background: -moz-linear-gradient(left, rgba(0, 0, 0,0.5), rgba(20%,20%,20%,0));
  background: -webkit-linear-gradient(left, rgba(0, 0, 0,0.5), rgba(20%,20%,20%,0));
}
#right:hover{
  background: -moz-linear-gradient(left, rgba(20%,20%,20%,0), rgba(0, 0, 0,0.5));
  background: -webkit-linear-gradient(left, rgba(20%,20%,20%,0), rgba(0, 0, 0,0.5));
}

Copier après la connexion

Gauche et droite utilisent les attributs de couleur d'arrière-plan et de dégradé de transparence, et n'ajoutent que les navigateurs Firefox et Webkit. De plus, certains navigateurs IE ont désormais deux cœurs d'IE et de webkit, tels que 360 Safe Browser

Contexte : -moz-linear-gradient(gauche, rgba(84, 84, 84, 0.50), rgba(20%,20%,20%,0));

Contexte : -webkit-linear-gradient(left, rgba(84, 84, 84, 0.50), rgba(20%,20%,20%,0));

Afin d'obtenir une transition en douceur lors du changement, l'attribut de transition est ajouté :

　-moz-transition : 0,5s ;

　-webkit-transition : 0,5s ;

code js :

var box;
var count=1;
window.onload=function(){
  box=document.getElementById("img_box");
  var left=document.getElementById("left");
  var right=document.getElementById("right");
  left.addEventListener("click",_left);
  right.addEventListener("click",_right);
  document.body.addEventListener("mouseover",demo);
}
function _right(){
  var dis=0;
  if(count<4){
    dis=count*800;
  }else{
    dis=0;
    count=0;
  }
  box.style.left="-"+dis+"px";
  count+=1;
}
function _left(event){
  var dis=0;
  if(count>1){
    dis=(2-count)*800;
  }else{
    dis=-3*800;
    count=5;
  }
  box.style.left=dis+"px";
  count-=1;
}

Copier après la connexion

Utilisez le nombre de variables globales pour enregistrer quelle image est actuellement affichée. Lorsque vous cliquez sur le bouton de commutation, calculez quelle image doit être affichée en fonction du nombre, puis calculez et définissez l'attribut gauche de img_box.

Ce qui précède est le code js qui vous a été présenté pour obtenir l'effet de changement d'image. J'espère qu'il pourra vous aider à obtenir l'effet de changement d'image.