jQuery左側大圖右側小圖焦點圖幻燈切換代碼分享

2019-11-20 11:47:58

字體：大中小

來源：轉載

供稿：網友

這是一款基于jQuery實現的右側選項卡焦點圖片輪播動畫特效源碼，每個圖片的內容信息可以根據自己的喜好進行隱藏與顯示，是一段超酷的焦點圖輪播代碼。

為大家分享的jQuery左側大圖右側小圖焦點圖幻燈切換代碼如下

---------------------源碼下載效果查看-----------------------

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery左側大圖右側小圖切換代碼 </title><link rel="stylesheet" type="text/css" href="css/index.css" media="all"><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/script.js"></script></head><body><br><div class="examples_body"> <div class="examples_bg">  <div class="examples_image"> <img src="images/sample_banner1.jpg" alt="" /> <div class="desc"> <a href="#" class="collapse">Close Me!</a> <div class="block"> <h4>武林網//www.49028c.com</h4> <small>武林網發布時間</small> <p>武林網是國內專業的網站建設資源、腳本編程學習類網站,提供asp、php、asp.net、javascript、jquery、網頁制作、網絡編程、網站建設等編程資料。</p> </div>  </div> </div>  <div class="mune_thumb"> <ul> <li> <a href="images/sample_banner1.jpg"><img src="images/sample_banner1_thumb.jpg" alt="Image Name" /></a> <div class="block"> <h4>武林網二號圖片</h4> <small>武林網發布時間</small> <p>武林網是國內專業的網站建設資源、腳本編程學習類網站,提供asp、php、asp.net、javascript、jquery、網頁制作、網絡編程、網站建設等編程資料。</p> </div> </li> <li> <a href="images/sample_banner2.jpg"><img src="images/sample_banner2_thumb.jpg" alt="Image Name" /></a> <div class="block"> <h4 class="title02">武林網三號圖片</h4> <small>武林網發布時間</small> <p>武林網是國內專業的網站建設資源、腳本編程學習類網站,提供asp、php、asp.net、javascript、jquery、網頁制作、網絡編程、網站建設等編程資料。</p> </div> </li> <li> <a href="images/sample_banner3.jpg"><img src="images/sample_banner3_thumb.jpg" alt="Image Name" /></a> <div class="block"> <h4 class="title03">武林網四號圖片</h4> <small>武林網發布時間</small> <p>武林網是國內專業的網站建設資源、腳本編程學習類網站,提供asp、php、asp.net、javascript、jquery、網頁制作、網絡編程、網站建設等編程資料。</p> </div> </li> <li> <a href="images/sample_banner4.jpg"><img src="images/sample_banner4_thumb.jpg" alt="Image Name" /></a> <div class="block"> <h4 class="title04">武林網五號圖片</h4> <small>武林網發布時間</small> <p>武林網是國內專業的網站建設資源、腳本編程學習類網站,提供asp、php、asp.net、javascript、jquery、網頁制作、網絡編程、網站建設等編程資料。</p> </div> </li> </ul> </div>  </div></div></body></html>

運行效果圖：