Jquery 焦點圖用于圖片展示效果代碼

更新時間：2010年05月18日 20:30:53 作者：

今天因網站需要寫了個圖片展示效果,其中用到了Jquery的data函數，剛學就被我用這了，昨天看時還覺得無甚用處，因為可以人為地給一個節(jié)點加屬性嘛，不過省卻了幾句代碼而已。

效果圖如下所示:

演示代碼:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Jquery圖片展示焦點圖</title> <style type="text/css"> *{ margin:0px; padding:0px; list-style:none; border:0px;} body{ font-size:12px; color:white;} #imageShow{ position:relative; width:586px; height:150px; z-index:1; overflow:hidden;} #imageShow #imageSwitch{ position:absolute; right:0px; bottom:0px; padding-left:50px; z-index:2; background-color:#C08A93; filter: Alpha(opacity=70); opacity:0.7;} #imageShow #imageSwitch li{ float:left; border-left:1px solid white; width:30px; height:14px; line-height:14px; text-align:center;} </style>   </head> <body> <div   class="vvxyksv9kd"   id="imageShow"> <ul id="imageSrc"> <li><img src="http://img.jbzj.com/demoimg/201005/o_1.gif"></li> <li><img src="http://img.jbzj.com/demoimg/201005/o_2.gif"></li> <li><img src="http://img.jbzj.com/demoimg/201005/o_3.gif"></li> <li><img src="http://img.jbzj.com/demoimg/201005/o_4.gif"></li> <li><img src="http://img.jbzj.com/demoimg/201005/o_5.gif"></li> </ul> <ul id="imageSwitch"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

jQuery動態(tài)生成Bootstrap表格
這篇文章主要介紹了jQuery動態(tài)生成bootstrap表格的相關資料,非常不錯具有一定的參考借鑒價值，需要的朋友可以參考下
2016-11-11
jQuery實現多按鈕單擊變色
本文給大家分享的是一段使用jQuery實現的多按鈕單擊之后變色的代碼，非常的簡單實用，有需要的小伙伴可以參考下。
2014-11-11
JQuery 動態(tài)擴展對象之另類視角
大家都知道javascript是動態(tài)語言，它對動態(tài)的支持是與身俱來的。
2010-05-05
jquery中ajax學習筆記3
由于很多知識都已經做了詳細介紹，本節(jié)只介紹需要修改的代碼，使用jqery封裝的ajax使用XML格式接收服務器端的數據，web.xml、后臺的servet都不用改
2011-10-10
jQuery插件zTree實現單獨選中根節(jié)點中第一個節(jié)點示例
這篇文章主要介紹了jQuery插件zTree實現單獨選中根節(jié)點中第一個節(jié)點的方法,結合實例形式分析了jQuery樹形插件zTree的具體使用技巧,需要的朋友可以參考下
2017-03-03
jQuery插件EnPlaceholder實現輸入框提示文字
EnPlaceholder插件支持密碼框哦！實際對比同類的placeholder插件在ie等瀏覽器下效果要好很多！下面我們來具體探討下此插件的使用方法吧。
2015-06-06
jQuery Easyui datagrid editor為combobox時指定數據源實例
當在datagrid行內部應用添加編輯操作時，引入combobox是非常方便的操作，這篇文章主要介紹了jQuery Easyui datagrid editor為combobox時指定數據源實例，有興趣的可以了解一下。
2016-12-12
jQuery實現類似滑動門切換效果的層切換
滑動門切換效果想必大家都有見到過吧，在本文為大家介紹下jQuery是如何實現層切換的
2013-09-09
直接拿來用的15個jQuery代碼片段
開發(fā)人員利用jQuery代碼不僅能給網站帶來各種動畫、特效，還會提高網站的用戶體驗。本文總結了開發(fā)者經常使用的15個jQuery代碼片段，大家可以直接拿來用。
2015-09-09
jQuery使用ajaxSubmit()提交表單示例
這篇文章主要介紹了jQuery使用ajaxSubmit()提交表單示例,使用延第三方插件jquery.form實現,需要的朋友可以參考下
2014-04-04