由於博主我懶，所以頁面畫的比較粗糙，但是沒關系，因為我主要講的是如何實現圖片動畫切換。
思路：想必大家都逛過淘寶或者其他的一些網站，一般都會有圖片動畫切換的效果，那是怎樣實現的呢？博主我呢，技術不是很好，弄了一個簡單的例子！
首先一般圖片上會有兩個圖片按鈕，一個左切換的按鈕一個右切換的按鈕，當我們單擊左切換按鈕時，原來的圖片就會向右移動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、小結：
看懂的小伙伴們可以自己去實踐一下，畢竟實踐出真理。
如果想做的更好看的同學，可以私信我，畢竟還有先功能我沒講，比如弄幾個圓點在圖片上面，當我們點擊圓點時就動畫切換到相對應的圖片上,還可以設置圖片輪播效果，每隔多少秒切換一次圖片。
還有就是按鈕的話，大家也可以弄的漂亮一些，可以在圖片左邊和右邊加一個圖片的按鈕，這樣和更美觀
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。