由于博主我懶，所以頁面畫的比較粗糙，但是沒關系，因為我主要講的是如何實現圖片動畫切換。

思路：想必大家都逛過淘寶或者其他的一些網站，一般都會有圖片動畫切換的效果，那是怎樣實現的呢？博主我呢，技術不是很好，弄了一個簡單的例子！

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

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是一個顯示圖片的框

imgBox是包住所有圖片的DIV，我們實現效果也是移動這個DIV就可以了

bth放了兩個button按鈕用來切換圖片

效果圖：

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設置圖片顯示框的寬高，絕對位置，邊框，還一個重要的屬性是overflow，溢出隱藏，當這個DIV里的內容超出這個DIV的大小時，溢出的部分會被隱藏掉。

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

.img設置左浮動，讓所有圖片向左浮動，保持在一條水平線上。

#bth 設置外邊距，因為上面的div設置了絕對位置所以這個div會被蓋住看不見了，所以把這個div挪出來。

 效果圖：

3、腳本代碼

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

提示：記得導入jQuery包

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

首先看一下我們的左切換按鈕單擊事件：當我們單擊按鈕時，首先判斷leftNum是否為0，如果為0，那么就是第一張圖片，第一張圖片左邊已經沒圖片了怎么辦，所以我們讓他跳到最后一張圖片，我們調用animate方法實現動畫效果，這里我寫的是left：left=-1500，為什么是-1500呢，left等于0時是第一張圖片，left等于-750的時候是第二張圖片，left等于-1500時就是第三張圖片，所以最后一張圖片的位置=-（圖片寬度）X（圖片總數）-1。如果leftNum不為0時，我們就在原來的基礎上加750px。

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

 4、小結：

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

如果想做的更好看的同學，可以私信我，畢竟還有先功能我沒講，比如弄幾個圓點在圖片上面，當我們點擊圓點時就動畫切換到相對應的圖片上,還可以設置圖片輪播效果，每隔多少秒切換一次圖片。

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。