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——左右按鈕點選切換一組圖檔功能一、最終效果二、功能分析三、代碼