jQuery實現(xiàn)點擊小圖片淡入淡出顯示大圖片特效

更新時間：2015年09月09日 11:42:43 作者：愛上程序猿

本文給大家分享基于jquery實現(xiàn)的一款圖片特效，當(dāng)點擊小圖片時會淡入淡出大圖片，通過定義需要展示的圖片以及圖片要展示的時間，來實現(xiàn)這一效果，感興趣的朋友跟著小編一起來學(xué)習(xí)吧

分享一款基于jQuery點擊淡入淡出顯示圖片特效。這是一款基于jQuery+CSS3實現(xiàn)酷炫效果的圖片切換特效代碼。效果圖如下：

在線預(yù)覽源碼下載

html代碼：

<center><p style="color:#334960">點擊圖標(biāo)進(jìn)行展示</p></center>
 <div class="main">
  <div id="coolShow"></div>
  <div id="handBar"></div>
 </div>
 <script type="text/javascript">
  /*定義需要展示的圖片以及圖片的展示時間*/
  $(document).ready(function () {
   $('#coolShow').coolShow({
    imgSrc: ['images/1.png', 'images/2.png', 'images/3.png'],
    speed: 40
   });
  });
 </script>

您可能感興趣的文章:

相關(guān)文章

詳解jQuery中的事件
jQuery增加了并擴展了基本的事件處理機制，不但提供了更加優(yōu)雅的事件處理語法，而且極大地增強了事件處理能力。本文將對此進(jìn)行詳細(xì)介紹，需要的朋友一起來看下吧
2016-12-12
jQuery一鍵移除使前端項目脫離對它的依賴
這篇文章主要為大家介紹了jQuery一鍵移除使項目脫離對它的依賴使用方式，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-04-04
jQuery驗證插件validate使用詳解
這篇文章主要為大家詳細(xì)介紹了jQuery驗證插件validate的使用方法，jQuery.validate.js插件用于對表單輸入進(jìn)行驗證，對驗證插件感興趣的小伙伴們可以參考一下
2016-05-05
深入理解jquery的$.extend()、$.fn和$.fn.extend()
下面小編就為大家?guī)硪黄钊肜斫鈐query的$.extend()、$.fn和$.fn.extend()。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
這篇文章主要介紹了jQuery鏈?zhǔn)讲僮?實例分析了jQuery基于鏈?zhǔn)讲僮鲃討B(tài)改變頁面元素樣式的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-11-11

利用JQuery操作iframe父頁面、子頁面的元素和方法匯總

這篇文章主要給大家介紹了關(guān)于利用JQuery操作iframe父頁面、子頁面的元素和方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。

2017-09-09