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

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

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

html代碼：

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

您可能感興趣的文章:

相關(guān)文章

詳解jQuery中的事件
jQuery增加了并擴(kuò)展了基本的事件處理機(jī)制，不但提供了更加優(yōu)雅的事件處理語(yǔ)法，而且極大地增強(qiáng)了事件處理能力。本文將對(duì)此進(jìn)行詳細(xì)介紹，需要的朋友一起來(lái)看下吧
2016-12-12
jQuery一鍵移除使前端項(xiàng)目脫離對(duì)它的依賴
這篇文章主要為大家介紹了jQuery一鍵移除使項(xiàng)目脫離對(duì)它的依賴使用方式，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-04-04
jQuery驗(yàn)證插件validate使用詳解
這篇文章主要為大家詳細(xì)介紹了jQuery驗(yàn)證插件validate的使用方法，jQuery.validate.js插件用于對(duì)表單輸入進(jìn)行驗(yàn)證，對(duì)驗(yàn)證插件感興趣的小伙伴們可以參考一下
2016-05-05
深入理解jquery的$.extend()、$.fn和$.fn.extend()
下面小編就為大家?guī)?lái)一篇深入理解jquery的$.extend()、$.fn和$.fn.extend()。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
jQuery鏈?zhǔn)讲僮鲗?shí)例分析
這篇文章主要介紹了jQuery鏈?zhǔn)讲僮?實(shí)例分析了jQuery基于鏈?zhǔn)讲僮鲃?dòng)態(tài)改變頁(yè)面元素樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-11-11
利用JQuery操作iframe父頁(yè)面、子頁(yè)面的元素和方法匯總
這篇文章主要給大家介紹了關(guān)于利用JQuery操作iframe父頁(yè)面、子頁(yè)面的元素和方法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2017-09-09
jquery實(shí)現(xiàn)簡(jiǎn)單合攏與展開網(wǎng)頁(yè)面板的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)簡(jiǎn)單合攏與展開網(wǎng)頁(yè)面板的方法,通過(guò)簡(jiǎn)單的jquery頁(yè)面元素樣式操作實(shí)現(xiàn)展開與合攏面板的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-09-09
jquery帶有索引按鈕且自動(dòng)輪播切換特效代碼分享
這篇文章主要介紹了jquery實(shí)現(xiàn)的帶有索引按鈕且自動(dòng)輪播切換特效，圖片簡(jiǎn)單大方，感興趣的小伙伴可以參考下。
2015-09-09
jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示提示框的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示提示框的方法,以兩個(gè)不同實(shí)例形式分析了jQuery鼠標(biāo)滑過(guò)顯示提示框的實(shí)現(xiàn)技巧與功能代碼,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-02-02
利用JQuery制作符合Web標(biāo)準(zhǔn)的QQ彈出消息
本篇文章主要介紹了利用JQuery制作符合Web標(biāo)準(zhǔn)的QQ彈出消息。這里所說(shuō)的彈出消息指的是在網(wǎng)頁(yè)右下角升起又下去的那種框框,在這里用到了jQuery的自定義動(dòng)畫
2014-01-01