jQuery點擊小圖遮罩彈出大圖幻燈片切換代碼



188 748 250



特效描述:點擊小圖 遮罩彈出大圖 幻燈片切換,jQuery彈出層插件制作點擊小圖彈出大圖幻燈片效果。點擊列表圖片遮罩彈出大圖幻燈片切換代碼

代碼結構

1. 引入CSS

<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
<link type='text/css' href='css/gallery.css' rel='stylesheet' media='screen' />

2. 引入JS

<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/gallery.js'></script>

3. HTML代碼

<br><br><br><center><h1>點擊圖片查看效果</h1></center><br><br>
<div id='container'>
	<span class="flickr_badge_image"><a href="img/photo/1.jpg"><img src="img/photo/1.jpg" alt="第九站長" title="第九站長標題一" width="75" height="75"></a></span>
	<span class="flickr_badge_image"><a href="img/photo/2.jpg"><img src="img/photo/2.jpg" alt="第九站長" title="第九站長標題二" width="75" height="75"></a></span>
	<span class="flickr_badge_image"><a href="img/photo/3.jpg"><img src="img/photo/3.jpg" alt="第九站長" title="第九站長標題三" width="75" height="75"></a></span>
	<span class="flickr_badge_image"><a href="img/photo/4.jpg"><img src="img/photo/4.jpg" alt="第九站長" title="第九站長標題四" width="75" height="75"></a></span>
	<span class="flickr_badge_image"><a href="img/photo/5.jpg"><img src="img/photo/5.jpg" alt="第九站長" title="第九站長標題五" width="75" height="75"></a></span>
</div>
<script type='text/javascript' src='js/jquery.js'></script> 
<script type='text/javascript' src='js/jquery.simplemodal.js'></script> 



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 焦點圖 幻燈片 輪播圖 bar焦點圖 帶縮略圖的幻燈片 圖片滑動 圖片滑塊 提示框/彈出層
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子