天天看點

jquery——左右按鈕點選切換一組圖檔功能一、最終效果二、功能分析三、代碼

jquery——左右按鈕點選切換一組圖檔功能一、最終效果二、功能分析三、代碼

點選左邊pre按鈕,顯示前面三個圖檔,點選右邊的next按鈕,顯示後面的一組(三個)圖檔。初始化隻顯示next按鈕,到最後一組隻顯示pre按鈕,中間過程兩按鈕都顯示。

效果圖是最終效果有做響應式,但這不是重點,不做介紹。

jquery——左右按鈕點選切換一組圖檔功能一、最終效果二、功能分析三、代碼
jquery——左右按鈕點選切換一組圖檔功能一、最終效果二、功能分析三、代碼

 #activity-slide是整個幻燈的入口,後面會将其作為參數來調用幻燈功能。

 兩個按鈕ps_pre和ps_next将添加click事件響應點選切換功能。

因為左右切換都是三個為一組的切換,如果li總個數不是3的倍數時,需要增加li節點填滿。

jquery——左右按鈕點選切換一組圖檔功能一、最終效果二、功能分析三、代碼
jquery——左右按鈕點選切換一組圖檔功能一、最終效果二、功能分析三、代碼

上面是判斷得到需要追加的個數lisize,然後調用addlist追加。

addlist如下,從ul的第一個li開始複制,需要幾個就複制出幾個節點追加。節點追加完畢後重新計算ul的寬度。

jquery——左右按鈕點選切換一組圖檔功能一、最終效果二、功能分析三、代碼
jquery——左右按鈕點選切換一組圖檔功能一、最終效果二、功能分析三、代碼

現在準備工作已經完成了。接下來就是給按鈕添加響應事件。在幻燈切換時涉及到左右按鈕的顯示和隐藏,是以先說這個按鈕顯示功能,将此分裝成一個函數btnshow。

jquery——左右按鈕點選切換一組圖檔功能一、最終效果二、功能分析三、代碼
jquery——左右按鈕點選切換一組圖檔功能一、最終效果二、功能分析三、代碼

 接下來幻燈切換。這裡a是傳入的參數,也就是 #activity-slide。給它下面的是以的pre和next添加響應。

向前一組,組數now減一,now是幾,就讓ul的margin-left為負幾倍的組寬(即3倍的(li寬度+margin寬度)),然後顯示對于按鈕即可。

向後滑動一組li同理。

jquery——左右按鈕點選切換一組圖檔功能一、最終效果二、功能分析三、代碼
jquery——左右按鈕點選切換一組圖檔功能一、最終效果二、功能分析三、代碼

可能是jquery寫的原因,加了浏覽器縮放尺寸響應後點選切換按鈕響應有延時。

jquery——左右按鈕點選切換一組圖檔功能一、最終效果二、功能分析三、代碼
jquery——左右按鈕點選切換一組圖檔功能一、最終效果二、功能分析三、代碼
jquery——左右按鈕點選切換一組圖檔功能一、最終效果二、功能分析三、代碼
jquery——左右按鈕點選切換一組圖檔功能一、最終效果二、功能分析三、代碼
jquery——左右按鈕點選切換一組圖檔功能一、最終效果二、功能分析三、代碼
jquery——左右按鈕點選切換一組圖檔功能一、最終效果二、功能分析三、代碼
jquery——左右按鈕點選切換一組圖檔功能一、最終效果二、功能分析三、代碼
jquery——左右按鈕點選切換一組圖檔功能一、最終效果二、功能分析三、代碼

完整代碼

jquery——左右按鈕點選切換一組圖檔功能一、最終效果二、功能分析三、代碼
jquery——左右按鈕點選切換一組圖檔功能一、最終效果二、功能分析三、代碼
jquery——左右按鈕點選切換一組圖檔功能一、最終效果二、功能分析三、代碼

css部分:

jquery——左右按鈕點選切換一組圖檔功能一、最終效果二、功能分析三、代碼
jquery——左右按鈕點選切換一組圖檔功能一、最終效果二、功能分析三、代碼
jquery——左右按鈕點選切換一組圖檔功能一、最終效果二、功能分析三、代碼

繼續閱讀