由于博主我懶,所以頁面畫的比較粗糙,但是沒關(guān)系,因為我主要講的是如何實現(xiàn)圖片動畫切換。
思路:想必大家都逛過淘寶或者其他的一些網(wǎng)站,一般都會有圖片動畫切換的效果,那是怎樣實現(xiàn)的呢?博主我呢,技術(shù)不是很好,弄了一個簡單的例子!
首先一般圖片上會有兩個圖片按鈕,一個左切換的按鈕一個右切換的按鈕,當(dāng)我們單擊左切換按鈕時,原來的圖片就會向右移動XX像素,然后它左邊的圖片就會顯示到框里,而原來的圖片被隱藏了,單擊右切換按鈕的原理跟左按鈕相似。但如果一直點同一個按鈕的話,本來這個圖片切換框只有3張圖片的話,到最后一張的時候我們要做一個判斷,讓它移動回第一張或者最后一張。思路分析完了,下面看下我們的代碼:
1、html代碼
<div id="divBox"> <div id="imgBox"> <div class="img"><img src="0.jpg"/></