由于博主我懶，所以頁(yè)面畫(huà)的比較粗糙，但是沒(méi)關(guān)系，因?yàn)槲抑饕v的是如何實(shí)現(xiàn)圖片動(dòng)畫(huà)切換。

思路：想必大家都逛過(guò)淘寶或者其他的一些網(wǎng)站，一般都會(huì)有圖片動(dòng)畫(huà)切換的效果，那是怎樣實(shí)現(xiàn)的呢？博主我呢，技術(shù)不是很好，弄了一個(gè)簡(jiǎn)單的例子！

首先一般圖片上會(huì)有兩個(gè)圖片按鈕，一個(gè)左切換的按鈕一個(gè)右切換的按鈕，當(dāng)我們單擊左切換按鈕時(shí)，原來(lái)的圖片就會(huì)向右移動(dòng)XX像素，然后它左邊的圖片就會(huì)顯示到框里，而原來(lái)的圖片被隱藏了，單擊右切換按鈕的原理跟左按鈕相似。但如果一直點(diǎn)同一個(gè)按鈕的話，本來(lái)這個(gè)圖片切換框只有3張圖片的話，到最后一張的時(shí)候我們要做一個(gè)判斷，讓它移動(dòng)回第一張或者最后一張。思路分析完了，下面看下我們的代碼：

1、html代碼

<div id="divBox">
  <div id="imgBox">
    <div class="img"><img src="0.jpg"/></div>
    <div class="img"><img src="1.jpg"/></div>
    <div class="img"><img src="3.jpg"/></div>
  </div>
</div>
<div id="bth">
  <button id="zou">左</button>
  <button id="you">右</button>
</div>

divBox是一個(gè)顯示圖片的框

imgBox是包住所有圖片的DIV，我們實(shí)現(xiàn)效果也是移動(dòng)這個(gè)DIV就可以了

bth放了兩個(gè)button按鈕用來(lái)切換圖片

效果圖：

2、CSS代碼

  #divBox{
  height:315px;
  width:750px;
  position:absolute;
  border:#000000 1px solid;
  overflow:hidden;}

  #imgBox{
  position:absolute;
  width:2550px;}
  
  .img{
  float:left;}
  
  #bth{
  margin-left:800px;}

#divBox設(shè)置圖片顯示框的寬高，絕對(duì)位置，邊框，還一個(gè)重要的屬性是overflow，溢出隱藏，當(dāng)這個(gè)DIV里的內(nèi)容超出這個(gè)DIV的大小時(shí)，溢出的部分會(huì)被隱藏掉。

#imgBox設(shè)置絕對(duì)位置和寬度，這個(gè)寬度取決于你所有圖片寬度的總和，我這里是2550px，有三張圖片，每張圖片寬為750px；如果這里不給寬度的話里面的小DIV無(wú)法左浮動(dòng)。

.img設(shè)置左浮動(dòng)，讓所有圖片向左浮動(dòng)，保持在一條水平線上。

#bth 設(shè)置外邊距，因?yàn)樯厦娴膁iv設(shè)置了絕對(duì)位置所以這個(gè)div會(huì)被蓋住看不見(jiàn)了，所以把這個(gè)div挪出來(lái)。

 效果圖：

3、腳本代碼

　　$(function(){
    //定義一個(gè)變量保存距離左邊的位置
    var leftNum=0;
    $("#zou").click(function(){
      if(leftNum==0){
        //移動(dòng)到最后一張圖片
        $("#imgBox").animate({left:leftNum=-1500},500);
      }else{
        $("#imgBox").animate({left:leftNum=leftNum+750},500);
      }
      
    });
    
    $("#you").click(function(){
      if(leftNum==-1500){
        //移動(dòng)到第一張圖片
        $("#imgBox").animate({left:leftNum=0},500);
      }else{
        $("#imgBox").animate({left:leftNum=leftNum-750},500);
      }
      
    });
  });

提示：記得導(dǎo)入jQuery包

腳本代碼我寫(xiě)了兩個(gè)單擊事件，定義了一個(gè)保存距離左邊位置的屬性leftNum

首先看一下我們的左切換按鈕單擊事件：當(dāng)我們單擊按鈕時(shí)，首先判斷l(xiāng)eftNum是否為0，如果為0，那么就是第一張圖片，第一張圖片左邊已經(jīng)沒(méi)圖片了怎么辦，所以我們讓他跳到最后一張圖片，我們調(diào)用animate方法實(shí)現(xiàn)動(dòng)畫(huà)效果，這里我寫(xiě)的是left：left=-1500，為什么是-1500呢，left等于0時(shí)是第一張圖片，left等于-750的時(shí)候是第二張圖片，left等于-1500時(shí)就是第三張圖片，所以最后一張圖片的位置=-（圖片寬度）X（圖片總數(shù)）-1。如果leftNum不為0時(shí)，我們就在原來(lái)的基礎(chǔ)上加750px。

右切換按鈕的原理和左切換按鈕相似，我就不解釋那么多了。

 4、小結(jié)：

看懂的小伙伴們可以自己去實(shí)踐一下，畢竟實(shí)踐出真理。

如果想做的更好看的同學(xué)，可以私信我，畢竟還有先功能我沒(méi)講，比如弄幾個(gè)圓點(diǎn)在圖片上面，當(dāng)我們點(diǎn)擊圓點(diǎn)時(shí)就動(dòng)畫(huà)切換到相對(duì)應(yīng)的圖片上,還可以設(shè)置圖片輪播效果，每隔多少秒切換一次圖片。

還有就是按鈕的話，大家也可以弄的漂亮一些，可以在圖片左邊和右邊加一個(gè)圖片的按鈕，這樣和更美觀

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論