js實現圖片轉場效果，js實現切換

js實現圖片轉場效果，js實現切換

用js實現點擊按鈕，圖片切換的效果：

 1  <div class="box" id="box"> 2         <div class="img_box" id="img_box"> 3             <img src="../raw/b1.jpg" class="image" > 4             <img src="../raw/b2.jpg" class="image" > 5             <img src="../raw/b3.jpg" class="image" > 6             <img src="../raw/b4.jpg" class="image" > 7         </div> 8         <div id="left" class="switch"></div> 9         <div id="right" class="switch"></div>10     </div>

結構：用一個固定寬高的div來做最外層的容器，設定overflow為hidden，

然後內層img_box設定寬度為四倍box的寬度，高度相同，也就是說img_box裡面盛放四張img，但是可見的只有一張，下面的兩個div，left和right是充當按鈕實現點擊切換圖片，切換圖片也就是改變img_box的left屬性，所以img_box應該設定position為absolute，為了方便起見，box的position設定為relation，這樣img_box就是相對box進行定位了。四張圖片設定float為left，寬度和高度與box相同.

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 }View Code

left和right用到了背景顏色和透明度漸層的屬性,只添加了Firefox瀏覽器和webkit瀏覽器，另外現在有的IE瀏覽器是IE和webkit雙核心如360安全瀏覽器

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

為了實現切換的時候平滑過渡，所以添加了transition屬性：

　　-moz-transition: 0.5s;

　　-webkit-transition: 0.5s;

 

js代碼：

1 var box; 2 var count=1; 3 window.onload=function(){ 4 box=document.getElementById("img_box"); 5 var left=document.getElementById("left"); 6 var right=document.getElementById("right"); 7 left.addEventListener("click",_left); 8 right.addEventListener("click",_right); 9 document.body.addEventListener("mouseover",demo);10 }11 function _right(){12 var dis=0;13 if(count<4){14 dis=count*800;15 }else{16 dis=0;17 count=0;18 }19 box.style.left="-"+dis+"px";20 count+=1;21 }22 function _left(event){23 var dis=0;24 if(count>1){25 dis=(2-count)*800;26 }else{27 dis=-3*800;28 count=5;29 }30 box.style.left=dis+"px";31 count-=1;32 }View Code

用全域變數count來記錄當前顯示的第幾張圖片，當點擊切換按鈕的時候根據count來計算應該顯示第幾張照片，然後計算並設定img_box的left屬性即可。

 

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

（tips：第一張和第二張圖片都是華妃，第二張是截取的劇裡面的原圖，感覺顏色太暗所以調了一下顏色放在了第一張）