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用到了背景顏色和透明度漸變的屬性,只添加了火狐瀏覽器和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://39.105.101.122/myhtml/A-copy/img_switch/img_switch.html

(tips:第一張和第二張圖片都是華妃,第二張是截取的劇里面的原圖,感覺顏色太暗所以調了一下顏色放在了第一張)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM