首頁 > php教程 > PHP开发 > 主體

jQuery圖片切換動畫特效

高洛峰
發布: 2016-12-08 11:11:17
原創
1596 人瀏覽過

想法:想必大家都逛過淘寶或其他的一些網站,通常都會有圖片動畫切換的效果,那是怎麼實現的呢?博主我呢,技術不是很好,弄了一個簡單的例子!

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

1、html程式碼

<div id="divBox">
  <div id="imgBox">
    <div class="img"><img  src="0.jpg"/ alt="jQuery圖片切換動畫特效" ></div>
    <div class="img"><img  src="1.jpg"/ alt="jQuery圖片切換動畫特效" ></div>
    <div class="img"><img  src="3.jpg"/ alt="jQuery圖片切換動畫特效" ></div>
  </div>
</div>
<div id="bth">
  <button id="zou">左</button>
  <button id="you">右</button>
</div>
登入後複製

   

divBox是一個顯示圖片的框

imgBox是實現所有圖片的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設定圖片顯示框的寬高,絕對位置,邊框

#divBox設定圖片顯示框的寬高,絕對位置,邊框,還有一個重要的屬性是圖片顯示框的寬度,溢出隱藏,當這個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

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

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

 4、小結:

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

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

jQuery圖片切換動畫特效還有就是按鈕的話,大家也可以弄的漂亮一些,可以在圖片左邊和右邊加一個圖片的按鈕,這樣和更美觀

🎜🎜🎜
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板