jQuery是一種被廣泛用于前端web開發的JavaScript庫,其主要是因為其方便快捷的DOM操作能力而受人們的肯定。其中,一種常見的需求就是圖片切換,下面我們就介紹如何使用jQuery實現兩張圖片的切換。
// HTML部分 <div id="img-container"> <img src="image1.jpg" id="img1"> <img src="image2.jpg" id="img2" style="display:none"> </div> <button id="btn-switch">Switch</button>
首先在HTML中準備好兩張圖片,其中一張默認隱藏,添加一個按鈕用于觸發圖片切換操作。
// jQuery部分 $(function(){ $("#btn-switch").click(function(){ if($("#img1").is(":visible")){ $("#img1").hide(); $("#img2").show(); }else{ $("#img1").show(); $("#img2").hide(); } }); });
使用jQuery監聽按鈕的click事件,當點擊按鈕時,判斷第一張圖片是否已經顯示,如果是,則隱藏第一張圖片并顯示第二張圖片,否則則隱藏第二張圖片并顯示第一張圖片。
完成以上操作,我們就成功實現了兩張圖片的切換效果。