jQuery是一種流行的JavaScript庫,由于其簡單易用以及強大的功能,成為前端開發中必不可少的工具。其中一個常見應用就是圖片切換。以下是一個簡單的例子:
$(document).ready(function() { // 選取要切換的圖片和按鈕 var $imgs = $('.img'); var $buttons = $('.btn'); var currentImgIndex = 0; // 初始化顯示第一張圖片 $imgs.eq(currentImgIndex).fadeIn(); // 點擊按鈕切換圖片 $buttons.click(function() { // 隱藏當前圖片 $imgs.eq(currentImgIndex).fadeOut(); // 更新當前圖片索引 currentImgIndex = (currentImgIndex + 1) % $imgs.length; // 顯示下一張圖片 $imgs.eq(currentImgIndex).fadeIn(); }); });
上述代碼做了以下幾件事:
- 在網頁加載完畢后,選取需要切換的圖片和按鈕
- 初始化顯示第一張圖片
- 點擊按鈕時,隱藏當前圖片,更新當前圖片索引,并顯示下一張圖片
代碼中常用的jQuery函數包括:
$(document).ready()
:當網頁加載完畢后執行指定的函數$()
:選取指定的DOM元素.eq()
:選取指定索引的DOM元素.fadeIn()
/.fadeOut()
:漸入/漸出動畫效果.click()
:當元素被點擊時執行指定的函數
通過學習和練習,可以使用jQuery實現更多有趣的效果。祝大家學習愉快!