jQuery實現(xiàn)點擊小圖片淡入淡出顯示大圖片特效
更新時間：2015年09月09日 11:42:43 作者：愛上程序猿
本文給大家分享基于jquery實現(xiàn)的一款圖片特效，當(dāng)點擊小圖片時會淡入淡出大圖片，通過定義需要展示的圖片以及圖片要展示的時間，來實現(xiàn)這一效果，感興趣的朋友跟著小編一起來學(xué)習(xí)吧
分享一款基于jQuery點擊淡入淡出顯示圖片特效。這是一款基于jQuery+CSS3實現(xiàn)酷炫效果的圖片切換特效代碼。效果圖如下：
html代碼：
<center><p style="color:#334960">點擊圖標(biāo)進行展示</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>
您可能感興趣的文章:
- jQuery實現(xiàn)等比例縮放大圖片讓大圖片自適應(yīng)頁面布局
- 基于jquery的防止大圖片撐破頁面的實現(xiàn)代碼(立即縮放)
- jQuery+css實現(xiàn)的點擊圖片放大縮小預(yù)覽功能示例【圖片預(yù)覽 查看大圖】
- jQuery實現(xiàn)鼠標(biāo)滑過商品小圖片上顯示對應(yīng)大圖片功能【測試可用】
- jQuery實現(xiàn)鼠標(biāo)滑過預(yù)覽圖片大圖效果的方法
- jQuery實現(xiàn)大圖輪播
- jQuery實現(xiàn)的小圖列表，大圖展示效果幻燈片示例
- jquery插件jquery.LightBox.js實現(xiàn)點擊放大圖片并左右點擊切換效果(附demo源碼下載)
- jQuery實現(xiàn)點擊查看大圖并以彈框的形式居中
- 基于jQuery插件實現(xiàn)點擊小圖顯示大圖效果
- jquery實現(xiàn)移動端點擊圖片查看大圖特效
- jQuery實現(xiàn)點擊小圖顯示大圖代碼分享
- jquery 圖片點擊放大預(yù)覽功能詳解
相關(guān)文章
jQuery實現(xiàn)的Tab滑動選項卡及圖片切換(多種效果)小結(jié)
這篇文章主要介紹了jQuery實現(xiàn)的Tab滑動選項卡及圖片切換效果小結(jié),實例總結(jié)了幾種常見的tab切換效果,包括鼠標(biāo)點擊切換、滑過切換、定時自動切換等,非常具有實用價值,需要的朋友可以參考下2015-09-09
jQuery 翻頁組件yunm.pager.js實現(xiàn)div局部刷新的思路
翻頁插件有很多種，做出來的效果都非常棒，這篇文章主要介紹了jQuery 翻頁組件yunm.pager.js實現(xiàn)div局部刷新的思路，非常不錯,需要的朋友可以參考下2016-08-08
jQuery中的ready函數(shù)與window.onload誰先執(zhí)行
這篇文章主要介紹了jquery中ready函數(shù)與window.onload函數(shù)的區(qū)別，別講解了他們各自執(zhí)行的時機，通俗易懂，需要的朋友可以參考下。2016-06-06
在測量中 面是有不同的點組成，在輸入的時候 需要動態(tài)的添加 不同點的坐標(biāo)值2010-05-05
jQuery實現(xiàn)的粘性滾動導(dǎo)航欄效果實例【附源碼下載】
這篇文章主要介紹了jQuery實現(xiàn)的粘性滾動導(dǎo)航欄效果,涉及jQuery插件smint的相關(guān)使用技巧,并附帶完整實例源碼供讀者下載參考,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了jquery左右全屏大尺寸多圖滑動效果，特別適合用商城網(wǎng)站，視覺上特別有沖擊感，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
jquery 常用操作方法這樣的文件腳本之家發(fā)布的也比較多了，但每個人整理的不相同，大家可以參考腳本之家之前的發(fā)布的文章結(jié)合一下比較好。2010-01-01
這篇文章主要介紹了jQuery如何隱藏和顯示 input 默認(rèn)值,需要的朋友可以參考下2014-06-06
今天看到一個jquery插件jquery.fileupload.v.1.5.0，自己試著結(jié)合java做了一個ajax的文件上傳小應(yīng)用2009-03-03
這篇文章主要介紹了jquery中在頁面加載完成后執(zhí)行某個方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10