本文實例講述了jquery+css實現動感的圖片切換效果代碼。分享給大家供大家參考。具體如下：
運行效果截圖如下：
具體代碼如下：
基本思路：定義一個數組存放需要展示的圖片，接著當單擊圖片時刪除zoomIn類，添加fadeOutRight類，實現實圖右移并消失，記數器加1（用于調用下一張圖片），當圖片刪除500毫秒后判斷圖片是不是最后一張，如果是，就把記數器調為0，從第一張圖片開始，刪除圖片代碼，接著創建一張新的圖片代碼，并把src設為下一張圖片，同時加上縮放動畫樣式類animated zoomIn，讓圖片實現動畫顯示，之后把新建的圖片代碼插上p元素之前。
首選引入CSS動畫文件與jquery庫
<link rel="stylesheet" href="css/animate.min.css"/><script type="text/javascript" src="js/jquery/1.11.1/jquery.min.js"></script>
構建簡單的html
<div class="container"> <div class="center animated"> <h1>Image Animation with A Single Img, CSS3 & some jQuery</h1> <img class="animated" src="images/island_1x.png" alt=""/> <p> <a target="_blank" href="#">武林網</a>, </p> </div></div>
再加上一些CSS，這里隨意，請根據自己的項目來調整
.container { width: 100vw; height: 100vh; background-color: #fff; position: absolute; } .center { width: 600px; margin-left: auto; margin-right: auto; position: relative; top: 50%; transform: translateY(-50%); text-align: center; background-image: url(images/banana.png); background-position: -10000px,-10000px; background-repeat: no-repeat; } .center h1 { margin: 0px; padding: 0px; text-align: center; margin-bottom: 50px; font-size: 18px; text-transform: uppercase; } .center p{ padding-top:50px; text-align: center; color: #ccc; font-size: 12px; } .center p a{ text-decoration: none; color: inherit; } .center p a:hover{ color:#222; } .center img{ cursor: pointer; }基本的CSS定位整個頁面，動畫不受以上的CSS影響。
寫入JS實現動畫效要
var imgs=[ //定義存放圖片路徑的數組 "images/island_1x.png", "images/banana.png", "images/rescued-illos_1x.png", "images/rivalry_1x.png", "images/sir_crags_a_lot_1x.png", "images/sf-cryptids_1x.png", "images/db_space_1x.png", "images/xmas1_1x.png" ]; var counter =0; //圖片的記數器 $(document).ready(function () { $(".center").on("click","img",function(){ //定義.center單擊圖片事件 $(this).removeClass("zoomIn").addClass("fadeOutRight"); //刪除單擊圖片的zoomIn類，添加fadeOutRight類 counter++; //記數器加1 setTimeout(function(){ //500毫秒后執行此方法 if(counter==imgs.length) counter=0; //如果到了最后一張圖片則返回第一張 $(".center img").remove(); //刪除圖片 $("<img/>").attr("src",imgs[counter]).addClass("animated zoomIn").insertBefore($(".center p")); //拼接成下一張圖片并加上縮放動畫樣式類animated zoomIn,最后添加上.center p元素前 if(imgs[counter+1]!=undefined) $(".center").css("backgroundImage","url("+imgs[counter+1]+")") //如果下一張圖片沒有定義，剛為.center元素的背影圖片改為下一張圖片（不明白加此行代碼的用意，感覺沒意義。。。） },500); }); });以上就是jquery結合css實現動感的圖片切換效果，分享的代碼很詳細，還提供了代碼的基本思路，希望大家喜歡，并且可以學以致用。
新聞熱點
疑難解答
