Implementieren Sie den Bildwechseleffekt basierend auf Javascript_Javascript-Fähigkeiten

Das Beispiel in diesem Artikel zeigt Ihnen den Effekt des Bildwechsels mit js als Referenz. Der spezifische Inhalt ist wie folgt
Verwenden Sie js, um den Effekt zu erzielen, dass Sie auf eine Schaltfläche klicken und das Bild wechseln:

<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>

Struktur: Verwenden Sie ein Div mit fester Breite und Höhe als äußersten Container, setzen Sie den Überlauf auf versteckt,

Dann wird die Breite der inneren img_box auf das Vierfache der Breite der Box eingestellt, und die Höhe ist gleich. Das heißt, es gibt vier img in der img_box, aber nur eines ist sichtbar Unten sind links und rechts als Schaltflächen implementiert. Das Wechseln von Bildern bedeutet, dass img_box die Position auf „absolut“ gesetzt wird Die img_box wird relativ zur Box positioniert. Die vier Bilder sind so eingestellt, dass sie wie links schweben, und die Breite und Höhe stimmen mit der Box überein.

CSS-Code:

*{
  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));
}

Links und rechts verwenden die Attribute Hintergrundfarbe und Transparenzverlauf und fügen nur Firefox- und Webkit-Browser hinzu. Darüber hinaus verfügen einige IE-Browser jetzt über zwei Kerne aus IE und Webkit, wie z. B. 360 Safe Browser.

Hintergrund: -moz-linear-gradient(left, rgba(84, 84, 84, 0.50), rgba(20%,20%,20%,0));

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

Um einen reibungslosen Übergang beim Umschalten zu erreichen, wird das Übergangsattribut hinzugefügt:

　-moz-transition: 0,5s;

　-webkit-transition: 0,5s;

JS-Code:

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;
}

Verwenden Sie die globale Variablenanzahl, um aufzuzeichnen, welches Bild derzeit angezeigt wird. Berechnen Sie anhand der Anzahl, welches Bild angezeigt werden soll, und berechnen Sie dann das linke Attribut von img_box.

Das Obige ist der js-Code, der Ihnen vorgestellt wurde, um den Bildwechseleffekt zu erzielen. Ich hoffe, er kann Ihnen dabei helfen, den Bildwechseleffekt zu erzielen.