javascript_javascriptスキルに基づいた画像切り替え効果を実装する

この記事の例では、js を使用した画像切り替えの効果を紹介します。具体的な内容は次のとおりです。
js を使用して、ボタンをクリックして画像を切り替える効果を実現します:

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

構造: 最も外側のコンテナとして幅と高さが固定された div を使用し、オーバーフローを非表示に設定します。

内側の img_box の幅はボックスの幅の 4 倍に設定され、高さは同じになります。つまり、img_box には 4 つの img がありますが、2 つの div のみが表示されます。下の左と右はボタンとして実装されています。画像を切り替えるには、img_box の left 属性を変更することを意味します。そのため、便宜上、img_box の位置を相対に設定する必要があります。 img_box はボックスを基準にして配置されます。 4枚の写真は左のようにフローティングに設定されており、幅と高さはボックスと同じです。

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

左側と右側は背景色と透明度のグラデーション属性を使用し、Firefox と Webkit ブラウザのみを追加します。また、一部の IE ブラウザには、IE と Webkit のデュアル コアが搭載されています (360 セーフ ブラウザなど)。

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

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

切り替え時にスムーズな遷移を実現するために、transition 属性が追加されます。

-moz-transition: 0.5s;

-webkit-transition: 0.5s;

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

グローバル変数 count を使用して、切り替えボタンがクリックされたときにどのピクチャが表示されるかを記録し、そのカウントに基づいてどのピクチャを表示するかを計算し、img_box の left 属性を計算して設定します。

上記は画像切り替え効果を実現するために紹介したjsコードです。画像切り替え効果を実現するのに役立つことを願っています。