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

更新時(shí)間：2015年09月09日 11:42:43 作者：愛(ài)上程序猿

本文給大家分享基于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)酷炫效果的圖片切換特效代碼。效果圖如下：

在線(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實(shí)現(xiàn)的Tab滑動(dòng)選項(xiàng)卡及圖片切換(多種效果)小結(jié)
這篇文章主要介紹了jQuery實(shí)現(xiàn)的Tab滑動(dòng)選項(xiàng)卡及圖片切換效果小結(jié),實(shí)例總結(jié)了幾種常見(jiàn)的tab切換效果,包括鼠標(biāo)點(diǎn)擊切換、滑過(guò)切換、定時(shí)自動(dòng)切換等,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-09-09
jQuery 翻頁(yè)組件yunm.pager.js實(shí)現(xiàn)div局部刷新的思路
翻頁(yè)插件有很多種，做出來(lái)的效果都非常棒，這篇文章主要介紹了jQuery 翻頁(yè)組件yunm.pager.js實(shí)現(xiàn)div局部刷新的思路，非常不錯(cuò),需要的朋友可以參考下
2016-08-08
jQuery中的ready函數(shù)與window.onload誰(shuí)先執(zhí)行
這篇文章主要介紹了jquery中ready函數(shù)與window.onload函數(shù)的區(qū)別，別講解了他們各自執(zhí)行的時(shí)機(jī)，通俗易懂，需要的朋友可以參考下。
2016-06-06
Jquery 動(dòng)態(tài)添加按鈕實(shí)現(xiàn)代碼
在測(cè)量中面是有不同的點(diǎn)組成，在輸入的時(shí)候需要?jiǎng)討B(tài)的添加不同點(diǎn)的坐標(biāo)值
2010-05-05
jQuery實(shí)現(xiàn)的粘性滾動(dòng)導(dǎo)航欄效果實(shí)例【附源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的粘性滾動(dòng)導(dǎo)航欄效果,涉及jQuery插件smint的相關(guān)使用技巧,并附帶完整實(shí)例源碼供讀者下載參考,需要的朋友可以參考下
2017-10-10
jquery左右全屏大尺寸多圖滑動(dòng)效果代碼分享
這篇文章主要介紹了jquery左右全屏大尺寸多圖滑動(dòng)效果，特別適合用商城網(wǎng)站，視覺(jué)上特別有沖擊感，推薦給大家，有需要的小伙伴可以參考下。
2015-08-08
jquery 常用操作方法
jquery 常用操作方法這樣的文件腳本之家發(fā)布的也比較多了，但每個(gè)人整理的不相同，大家可以參考腳本之家之前的發(fā)布的文章結(jié)合一下比較好。
2010-01-01
jQuery 隱藏和顯示 input 默認(rèn)值示例
這篇文章主要介紹了jQuery如何隱藏和顯示 input 默認(rèn)值,需要的朋友可以參考下
2014-06-06
ajax 文件上傳應(yīng)用簡(jiǎn)單實(shí)現(xiàn)
今天看到一個(gè)jquery插件jquery.fileupload.v.1.5.0，自己試著結(jié)合java做了一個(gè)ajax的文件上傳小應(yīng)用
2009-03-03
jquery中在頁(yè)面加載完成后執(zhí)行某個(gè)方法
這篇文章主要介紹了jquery中在頁(yè)面加載完成后執(zhí)行某個(gè)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10