画像切り替え効果を実現する js_html/css_WEB-ITnose

js を使用して、ボタンをクリックして画像を切り替える効果を実現します:

 1  <div class="box" id="box"> 2         <div class="img_box" id="img_box"> 3             <img  class="image lazy"  src="/static/imghwm/default1.png"  data-src="../raw/b1.jpg"   alt="画像切り替え効果を実現する js_html/css_WEB-ITnose" > 4             <img  class="image lazy"  src="/static/imghwm/default1.png"  data-src="../raw/b2.jpg"   alt="画像切り替え効果を実現する js_html/css_WEB-ITnose" > 5             <img  class="image lazy"  src="/static/imghwm/default1.png"  data-src="../raw/b3.jpg"   alt="画像切り替え効果を実現する js_html/css_WEB-ITnose" > 6             <img  class="image lazy"  src="/static/imghwm/default1.png"  data-src="../raw/b4.jpg"   alt="画像切り替え効果を実現する js_html/css_WEB-ITnose" > 7         </div> 8         <div id="left" class="switch"></div> 9         <div id="right" class="switch"></div>10     </div>

構造: 固定の幅と高さの div を最も外側のコンテナとして使用し、オーバーフローを非表示に設定します。 inner img_box ボックスの幅の 4 倍で、高さは同じです。つまり、img_box には 4 つの img 画像がありますが、表示されるのは 1 つだけです。下の 2 つの div は、切り替えるボタンとして機能します。画像をクリックして切り替えることは、img_box の left 属性を変更することを意味します。そのため、img_box の位置は、便宜上、ボックスに対して相対的に配置されるように、relation に設定されます。 4 つの画像は左のようにフローティングに設定されており、幅と高さはボックスと同じです。

CSS コード:

 1 *{ 2     margin: 0; 3     padding: 0; 4 } 5 .box{ 6     width: 800px; 7     height: 400px; 8     margin: 20px auto; 9     position: relative;10     overflow: hidden;11 }12 .img_box{13     height: 400px;14     width: 3200px;15     position: absolute;16     -moz-transition: 0.5s;17     -webkit-transition: 0.5s;18 }19 img{20     width: 800px;21     height: 400px;22     float: left;23 }24 .switch{25     width: 200px;26     height: 100%;27     position: absolute;28 29 }30 #left{31     left: 0px;32     top: 0px;33     background: -moz-linear-gradient(left, rgba(84, 84, 84, 0.50), rgba(20%,20%,20%,0));34     background: -webkit-linear-gradient(left, rgba(84, 84, 84, 0.50), rgba(20%,20%,20%,0));35 }36 #right{37     right:0px;38     top: 0px;39     background: -moz-linear-gradient(left, rgba(20%,20%,20%,0), rgba(84, 84, 84,0.5));40     background: -webkit-linear-gradient(left, rgba(20%,20%,20%,0), rgba(84, 84, 84,0.5));41 }42 #left:hover{43     background: -moz-linear-gradient(left, rgba(0, 0, 0,0.5), rgba(20%,20%,20%,0));44     background: -webkit-linear-gradient(left, rgba(0, 0, 0,0.5), rgba(20%,20%,20%,0));45 }46 #right:hover{47     background: -moz-linear-gradient(left, rgba(20%,20%,20%,0), rgba(0, 0, 0,0.5));48     background: -webkit-linear-gradient(left, rgba(20%,20%,20%,0), rgba(0, 0, 0,0.5));49 }

left と right は、背景色と透明度のグラデーション属性を使用し、Firefox とWebkit ブラウザが追加されました , さらに、360 セキュア ブラウザなど、一部の IE ブラウザは IE と Webkit のデュアル コアを備えています

Background: -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) ));

For 切り替え時にスムーズな遷移を実現するために、transition 属性を追加します:

-moz-transition: 0.5s;

-webkit-transition: 0.5s;

js code:

rrree

グローバル変数を使用する count は、現在どの画像が表示されているかを記録するために使用され、次に、img_box の左側の属性を計算して設定します。

効果: http://huizit1.applinzi.com/A-copy/img_switch/img_switch.html

(ヒント: 1 番目と 2 番目の写真は両方とも華妃のもので、2 番目の写真は華妃の傍受です。ドラマの中の元の写真は、色が暗すぎると感じたので、色を調整して最初の写真に入れました。